In Vue.js, iterative rendering allows us to display a list of elements from a collection of data in JavaScript.
For example, if you have a list of names, Vue can create a visual element for each name in the list without you having to write them one by one.
If the collection changes (for example, you add or remove an element), Vue will automatically update the displayed content.
The v-for Directive
The v-for directive allows us to iterate over a list of elements and render them on screen.
v-for="item in list"
Where
itemis the name of the variable representing each element in the listlistis the list itself.
Let’s see it with an example,
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' },
]);
</script>
In this example,
- Each element in the list will be rendered as an
<li>inside a<ul>. - The
:keyproperty is necessary to help Vue uniquely identify each element in the list and optimize performance.
The Key Value
In Vue, when we use the v-for directive, it is highly recommended to provide a unique key (key) for each iterated element (and in some cases it’s necessary).
This is because Vue needs a way to identify each element in the list to efficiently track changes.
This key is usually the index of the element in the list or a unique identifier like an id.
What happens if you don’t use key?
If you don’t provide a key, Vue will emit a warning in the console and will implicitly use the index.
However, this can lead to problems such as:
- State loss: If elements have internal state (like inputs), Vue might lose it when reordering or deleting elements.
- Inefficiency: Vue might recreate elements instead of reusing them, affecting performance.
What can we use as a Key
Since we always need to use a :key in our v-for, we have to see what options we have to use as a key.
We have two main options.
- A unique identifier in the object (if it has one)
- The
indexof the array (always available)
Often, our object already has a unique identifier. For example, because it has an Id, or a Guid, etc., that we use when saving to a database.
In that case, it makes sense to use the element’s own Id as the Key.
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
If our element doesn’t have its own unique identifier, sometimes it’s enough to use the element’s index in the list. Like this,
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
Each one has its advantages and disadvantages.
| Criterion | id | index |
|---|---|---|
| Ease | More complex (the object needs to have an Id) | Simple |
| Changing order | ✅ Maintains state correctly | ❌ May misassociate state |
| Deleting or adding elements | ✅ Handled correctly | ❌ May cause errors |
| Reordering elements | ✅ Works well | ❌ May give unexpected results |
| When to use | Dynamic lists | Static lists |
- Use a unique identifier (
id) if the object has anid. - If not, use
indexonly for static and simple lists. - If necessary, add an
idto the object yourself.
