How to render lists using Vue 3 v-for Directive?

Imagine that we have to render a list of items on our application’s user interface. Basically, we want to repeat a particular DOM element for all the items. Vue 3 v-for directive helps us render lists on our UI.

To render lists using Vue 3 v-for directive, we have to provide an array or object as input to v-for directive. The v-for directive helps us loop for all items in the array and render a DOM element for each of the item. However, there are a few considerations about index and key for items that need to be kept in mind when working with v-for directive in VueJS.

In this post, we will look at Vue3 list rendering using v-for directive in detail.

1 – Vue 3 v-for Basic Example

We will look at a basic example to understand how the v-for directive works.

Consider a list of books as below:

const books = ref([
  { title: 'The Wheel of Time' },
  { title: 'The Way of Kings' },
  { title: 'Dune' },
]);

We have enabled VueJS reactivity on the books array using the ref() function. To render this list of books on the DOM, we use v-for directive in the template as below:

<li v-for="book in books">
    {{ book.title }}
</li>

Inside the v-for element scope, we can access the sub-properties of book using template syntax. Basically, the <li> element will be repeated for every book in the array.

Notice that we have used VueJS Composition API in the above example. The code is not so different for Options API except for how we set up the books array using data() method.

Like Javascript’s forEach callback function, we can also de-structure the book item as below:

<li v-for="{ title } in books">
    {{ title }}
</li>

2 – Vue 3 v-for Index

Many times, we also need to use the index value of the item in the array. Using v-for directive, we can also get access to the index as below:

<li v-for="(book, index) in books">
    {{ index }} - {{ book.title }}
</li>

The index will start from 0.

3 – Vue 3 v-for Key Rendering

When our list changes, VueJS uses in-place patch strategy to update the DOM. In case the order of the items has changed, it does not move the DOM elements to match the item. Instead, Vue patches each element to make sure it matches with the array or object.

While this process works for simple list, it is advisable to provide a unique key for each item. This allows VueJS to track each node’s identity and reuse/reorder the elements. In other words, using a unique key makes the rendering process more efficient and less error prone.

To use v-for key-based rendering, we need to tweak our books array.

const heading = ref('Title');

const booksWithId = ref([
  { id: 1, title: 'The Wheel of Time' },
  { id: 2, title: 'The Way of Kings' },
  { id: 3, title: 'Dune' },
]);

Notice that every book has an additional field known as id.

We can now write a template that uses the key value.

<li v-for="(book, index) in booksWithId" :key="book.id">
    {{ index }} - {{ heading }} - {{ book.title }}
</li>

Basically, for every item, we bind the book.id to the DOM node using VueJS v-bind directive.

Note that the key binding expects a primitive value such as a number or a string. We should not pass an object to the key binding. It is much better to use a number that is guaranteed to be unique for every item in the list.

4 – Vue 3 v-for Object Usage

Apart from a typical list, we can use the Vue 3 v-for directive for objects as well.

See below example:

const bookObject = reactive({
  title: 'Dune',
  author: 'Frank Herbert',
});

The bookObject contains two fields – title and author.

We can render the list of object keys as follows:

<ul>
    <li v-for="(value, key, index) in bookObject">
      {{ index }}. {{ key }}: {{ value }}
    </li>
</ul>

Here, key is actually the object key such as title and author.

In case, we have multiple elements for a single item, we can also use v-for directive on a template element.

<ul>
    <template v-for="(value, key, index) in bookObject">
      <li>{{ index }}. {{ key }}: {{ value }}</li>
    </template>
</ul>

Everything with the template element will be repeated for every iteration of the v-for.

Conclusion

Vue 3 v-for directive can render lists with minimal syntax changes. However, for good performance, we should always use a key with a list element.

You can play around with the code on Stackblitz.

Want to learn about v-for usage with v-if? Check out this post on VueJS Conditional Rendering.

If you have any comments or queries about this post, please feel free to mention them in the comments section below.