Skip to content
wannacode

Conditions: empty, error, loading

In short: Conditional rendering shows only the part of the markup that matches the data (loading, error, empty or the list); in Vue with v-if, v-else and v-show.

Problem

Loading, error and the list at once

The catalog has loaded. Under the heading, though, it says "Loading…", then "The products did not load.", then "There are no products in this category.", and only then come the products.

Vue

The Catalog component gets status and the products as props. But it does not look at them: it always draws all four parts. The buyer does not know what to believe, and a screen reader reads both the error and the products.

The idea

The part that matches the data

The catalog has four states: loading, error, empty and ready. Only the part for the current one should be on the screen. This is conditional rendering: the component decides what to return based on the data.

In Vue the conditions are attributes in the template:

<p v-if="status === 'loading'" role="status">Loading…</p>
<p v-else-if="status === 'error'" role="alert">The products did not load.</p>
<p v-else-if="status === 'empty'">There are no products in this category.</p>
<ul v-else>…</ul>

v-if draws the element only if the expression is true. v-else-if and v-else continue the chain and must come right after the previous element of it. Exactly one element of the chain is drawn.

The two libraries solve the same thing in their own way: React with JavaScript around the markup, Vue with attributes inside it. The result is the same: the element of a false condition is not in the DOM. It is not hidden, it does not exist.

Here status is given as a prop. How the catalog changes it by itself while loading from the API is in the module "Effects, data and forms".

See it

See which branch goes in

One value goes into the component, and only one branch goes into the DOM. Watch the "DOM" column on every change of status.

<template>
  <p v-if="status === 'loading'">Loading…</p>
  <p v-else-if="status === 'error'">Error</p>
  <p v-else-if="status === 'empty'">No products</p>
  <ul v-else>…</ul>
</template>


<!-- in the DOM, but hidden -->
<p v-show="status === 'loading'">Loading…</p>
Step by step, in words
  1. status comes into the component as a prop. It is 'loading': v-if matches, and only <p>Loading…</p> is drawn. The other branches are not in the DOM at all.
  2. status becomes 'error'. The library draws again: now the second branch matches. <p>Loading…</p> leaves the DOM, and the error message comes in.
  3. 'empty': only the message that the category is empty.
  4. 'ready': none of v-if and v-else-if matches, so v-else is drawn: the list. One branch at a time is in the DOM.
  5. The other way: v-show always draws the element and only switches its display. With status loading, it is visible.
  6. status becomes 'ready'. The element stays in the DOM, with what is in it, and only gets display: none. Nobody sees it, and a screen reader skips it.
  7. v-if removes the element from the DOM, v-show only hides it. v-if is the default; v-show is for something that is toggled often or must keep what was typed.

The first part is conditional rendering: on a new value the old element leaves the DOM and the new one comes in. The second part is hiding: the element is in the DOM the whole time and is only shown or hidden. The end of the lesson is about it.

Try it

The four states

Catalog draws everything at once. Make it so that every section has only the part of its state: "Loading…" for loading, the error for error, "There are no products in this category." for empty and the list for ready. The other parts must not be on the page.

Vue

Try it

Fill in

"Loading…" should show only while status is loading.

<p ="status === 'loading'" role="status">Loading…</p>

The idea

Sold out: a badge and a disabled button

A condition is not only for whole parts. In the product card it changes a text and an attribute:

<p v-if="product.stock === 0" class="badge">Sold out</p>
<p v-else>Only {{ product.stock }} left</p>
<button type="button" :disabled="product.stock === 0">Add</button>

:disabled="true" puts the disabled attribute on, and :disabled="false" removes it.

A disabled button cannot be pressed, does not take the focus with Tab, and a screen reader says that it is unavailable. The badge says why. A button that can be pressed and then says "out of stock" is worse: the buyer finds out only after the click.

Try it

Sold out

Make ProductCard show "Sold out" and disable the "Add" button when stock is 0. Otherwise it shows "Only 5 left" and the button works. The cheese is sold out.

Vue

The idea

The zero on the screen

v-if looks at whether the value is truthy, so v-if="items.length" with an empty cart draws nothing. The zero comes out when the condition is in {{ }}:

<p>{{ items.length && `In the cart: ${items.length}` }}</p>  <!-- empty cart: 0 -->
<p v-if="items.length > 0">In the cart: {{ items.length }}</p> <!-- empty cart: nothing -->

&& does not return true or false. It returns the left side if that is falsy: here 0, and {{ }} shows it. {{ false }} even shows the word "false". Write conditions with v-if, and keep {{ }} for values.

Try it

Find the bug

With an empty cart, the top corner says "0".

Pick the line with the bug.

The idea

Removed or hidden

Sometimes an element has to stay in the DOM and only not be seen. Here both panels have a field for a note. Open both, type something, close them and open them again.

Vue
In the first section the panel uses v-if: when closed it is gone, and when opened it is new, with an empty field. In the second it uses v-show: it stays in the DOM with display: none and keeps what was typed.

Removing is the default: fewer elements on the page, nothing hidden for a screen reader. Hiding is for parts that are opened and closed often or have to keep what was entered in them.

More precisely, if you are curious

v-if on <template>. To show several elements under one condition without a wrapper, put v-if on a <template>: it does not go into the DOM. v-show does not work on <template>, because there is no element to put display: none on.

The cost. v-if makes and removes the elements on every change, while v-show makes them once, on the first render, and then only switches display. So v-show is for parts that change often, and v-if for parts that are shown rarely.

v-if and v-for. In Vue 3 a v-if on the same element as v-for runs first and does not see the loop variable. Put the v-if on a wrapper or filter the data.

The Options API in old code uses the same v-if, v-else and v-show.

aria-hidden is not hiding. aria-hidden="true" hides the element only from a screen reader, and it stays on the screen. Hiding from everybody is display: none: hidden, v-show or removing.

Exercise

The cart

App shows three carts: empty, with products and with a sold out product. Make Cart so that the empty one says "The cart is empty.", with no list and no total, and the "Place order" button is disabled. The full one shows the rows, "Total: €4.00" and a working button. The sold out product has a "Sold out" badge, above the button it says "Remove the sold out products to place the order." (role alert), and the button is disabled.

Vue

Test

Check yourself

1. The condition for "Loading…" is false. What is in its place in the DOM?
2. The cart is empty. What does <p>{{ items.length && 'There are products' }}</p> show?
3. What is true about v-else?
4. A panel with a note field is opened and closed often, and what was typed has to stay. Which fits better?

Made by Ivo Gergov as part of Evo Tech's campaign for accessible programming education ·