Using keys properly of loops in Vue
- Tram Ho
1. v-for & key
A small example of loop in vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <template> <div id="app"> <p v-for="(item, index) in items" :id="index">{{ item }}</p> </div> </template> <script> export default { data() { return { items: [1, 2, 3], } }, }; </script> |
result
Now I will add a function to reverse the array items
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <template> <div id="app"> <p v-for="(item, index) in items" :id="index">{{ item }}</p> <button @click="reserve">reserve</button> </div> </template> <script> export default { data() { return { items: [1, 2, 3], } }, methods: { reserve() { this.items = [3, 2, 1]; } } }; </script> |
After clicking the button reserve then the array has been reversed and displayed correctly
But if you open inspect and look at id of cards <p> then the position of the cards is not reversed, only the value changes
The reason why we can easily find on Vue’s docs
When Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of track-by=”$index” in Vue 1.x.
Simply put, when the list is updated, Vue will use the “in-place patch” method by default. If the order of the elements in the array is changed, Vue will update the values on the DOM elements to make sure they are displayed correctly, not move them in the new order.
Not moving the DOM can cause unexpected errors when you’re working with a form, for example. To make it easier to understand, I will make another example. First I will create a new component CustomInput
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template> <div> <span>{{ title }} </span> <input type="text"> </div> </template> <script> export default { props: { title: String } }; </script> |
Then I will edit the original file with an example of a loop
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <template> <div id="app"> <p v-for="(item, index) in items" :id="index"> <custom-input :title="item"/> </p> <button @click="reserve">reserve</button> </div> </template> <script> import CustomInput from './components/CustomInput'; export default { components: { CustomInput }, data() { return { items: ['name', 'sex', 'age'], } }, methods: { reserve() { this.items = ['age', 'sex', 'name']; } } }; </script> |
Now try to enter some information and press the button reserve. Here are the results before and after pressing the button.
The title of the input has changed but the value doesn’t match, because the components are not reordered, only the input value is updated.
So that the components can be rearranged in a new order, let’s add key into the loop. Edit the code a bit
1 2 | <p v-for="(item, index) in items" :id="index" :key="index"> |
Unfortunately, the index is useless in this case, because when you reverse the position of the element in the array, the index is still rendered in order => the key is changed => not unique. What we need key is that it must be unique and primitive. In most cases, using the index as a key is useless, so in my personal opinion, you should be careful when using the index as a key.
2. Solution using key for simple array
For the case of a simple array like the example above, you should always use the value of the element as the key (make sure no elements are duplicate). If it’s an array of objects, use lib object-hash + computed to generate keys for elements. In case of duplicate elements, generate a key for each element using the random algorithm.