Learn Vue: List and Conditional Rendering.

Imaging you are developing an application, and you want to render some data in the browser based on certain conditions or you have an array of data that you want to loop through and display to in the browser, how can we achieve this Vue? In this guide, we we'll learn List rendering and conditional rendering in Vue and how we can tap into the powers of the v-if and the v-for directives.

List Rendering

The v-for directive is used to render an array of items or an object. The syntax is very simple and easy; item in items where item is the individual item that would be rendered and items is the list we are looping through.

Rendering array with v-for

//template
<div v-for="name in names">{{ name }}</div>

//script

const names = ref(["Vue", "Nuxt", "Vite", "Vitepress"]

v-for will loop through the names array and display each of name in the browser.

Rendering object with v-for

The v-for can also be used to iterate through an object, the sequence of the iterations will rely on the outcome of invoking Object.keys() on the object:

//template
<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

//script
const myObject = reactive({
  title: 'How to render lists in Vue',
  author: 'KingstonCodes',
  publishedAt: '2023-08-10'
})

Optionally, we can also include the key of each property in the object <li v-for="(value, key) in myObject"> {{ value }} </li>

v-for and key

In order to maintain the state of the items when rendering them to the browser, we can introduce a unique key attribute to reference to each item in the list:

<div v-for="item in items" :key="item.id">
 {{ item }}
</div>

The v-for directive is extremely important as it helps us render lists to the browser effortlessly.

Conditional Rendering

We can render anything to the browser conditionally using either the v-show directive or the v-if directive. Both v-show and v-if can be used to achieve the same result, the difference is that the v-show directive only toggles the CSS display property of the element, hence an element with the v-show directive will always be present in the browser.

v-show

Let's see an example of conditional rendering with the v-show directive.

<div v-show="isTrue">
//content here
</div>

//script
const isTrue = ref(true)

The div will always be rendered in the browser as long as isTrue remains true, likewise, when isTrue is false the div disappears from the browser.

v-if

Like the v-show directive, the v-if directive is also used to conditional render elements to the browser, the element is only rendered when the directive's expression returns a truthy value.

<div v-if="isTrue">
//content here
</div>

//script
const isTrue = ref(true)

Another difference between the v-if directive and the v-show directive is that, we can use v-else and v-else-if directives to match cases where the directives expression isn't true.

v-if with v-else and v-else-if

<div v-if="isTrue < 0">
//display content here
</div>

<div v-else-if="isTrue > 0">
//display content here
</div>

<div v-else>
//display content here
</div>

//script
const isTrue = ref(0)

Like the traditional if, else if, and else in JavaScript, the v-if, v-else and v-else-if can be used to achieve similar result.

In the above example, the v-else block will run because isTrue is neither less than or greater than zero. Similarly, the v-if block or v-else-if block will run depending on whether isTrue is greater than or less than 0

v-for with v-if

Sometimes, we might want to render a list to the browser when certain conditions are met, to achieve this, we need to first loop through the list with v-for then check whether the condition is met with v-if before displaying it.

The problem is, it is not a good practice to use the v-for and v-if directives on the same element, because when they exist on the same element, v-if will have higher level of priority over v-for, meaning that v-if will not be able to access the variable from the v-for block.

<!--
This will not work
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

To fix this, let's move the v-for directive to a wrapper tag.

<template v-for="todo in todos"> 
<li v-if="!todo.isComplete">
  {{ todo.name }}
</li>
</template>

And that's it, the v-for block will always execute before the v-if block, thereby allowing the v-if directive access to the v-for variable and carry out the action.