In Vue.js, iterative rendering allows us to display a list of elements from a data collection in JavaScript.
For example, if you have a list of names, Vue can create a visual element for each name in the list without 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.
v-for Directive
The v-for directive allows us to iterate over a list of elements and render them on the screen.
v-for="item in list"Where
- “item” is the name of the variable representing each element in the list
- “list” is 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 of the list will be rendered as an
<li>inside a<ul>. - The
:keyproperty is necessary to help Vue identify each element of the list uniquely and optimize performance.
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 necessary).
This is because Vue needs a way to identify each element in the list to track changes efficiently.
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 do not provide a key, Vue will emit a warning in the console and will implicitly use the index.
However, this can lead to issues such as:
- State loss: If elements have internal state (like inputs), Vue may lose it when reordering or removing elements.
- Inefficiency: Vue may recreate elements instead of reusing them, which affects performance.
What can we use as Key
Since we will always have to use a :key in our v-for, we need 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)
In many cases, our object already has a unique identifier. For example, because it has an Id, or a Guid, etc., that we use when saving in a database.
In that case, it makes sense to use the element’s Id itself as Key.
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>If our element does not have its own unique identifier, sometimes it is enough to use the index of the element in the list. So,
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>Each will have its advantages and disadvantages
| Criterion | id | index |
|---|---|---|
| Ease | More complex (the object must have Id) | Simple |
| Change order | ✅ Maintains state correctly | ❌ May misassociate state |
| Remove or add elements | ✅ Handled correctly | ❌ May cause errors |
| Reorder elements | ✅ Works well | ❌ May yield unexpected results |
| When to use | Dynamic lists | Static lists |
- Use a unique identifier (
id) if the object has anid. - If not, use
indexonly in static and simple lists. - If necessary, add an
idto the object yourself.