Why not always use the index as the key in a vue.js for loop?

Question

I have used vue.js for a couple of projects and I have been using the index as the key in the for loops

<div v-for="(item, index) in items" :key="index"></div>

...and have started to wonder if there are problems with that since examples usually use the ID of the item.

<div v-for="(item, index) in items" :key="item.ID"></div>

Answer 1

Because arrays are mutable . The index of any given item can and will change if items are added to or removed from the array.

You want your key to be a unique value identifying only your unique component. A primary key that you create is always better than using an index.

Here is an example.

 console.clear() Vue.component("item", { props: ["value"], data() { return { internalValue: this.value } }, template: `<li>Internal: {{internalValue}} Prop: {{value}}</li>` }) new Vue({ el: "#app", data: { items: [1, 2, 3, 4, 5] }, methods: { addValue() { this.items.splice(this.items.length / 2, 0, this.items.length + 1) } } })

 <script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> <div id="app"> {{items}} <ul> <item v-for="i in items" :value="i" :key="i"></item> </ul> <button @click="addValue">AddValue</button> <ul> <item v-for="(i, index) in items" :value="i" :key="index"></item> </ul> </div>

Note that when addValue is clicked, the list on top represents the new numbers in the array where the truly are in the array; in the middle. In the second list below the button, the values do not represent the actual location in the array and the internal and property values do not agree.

Answer 2

From the Vue docs (emphasis mine): https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key

To give Vue a hint so that it can track each node's identity , and thus reuse and reorder existing elements , you need to provide a unique key attribute for each item

If the index of any item in the array is changed (eg by adding/removing a new item anywhere other than the end of the array), then Vue will lose track of the item.

For example:

let data = [A, B, C, D]
<div v-for="(item, index) in data" :key="index">

Vue tracks each item like this:

A: 0
B: 1
C: 2
D: 3

If you remove B from the array, Vue will then track each item like this:

A: 0
C: 1
D: 2

The indices of C and D have changed, so Vue has lost track of them, and will remove D from the rendered output instead of B (because from its point of view, it is the item with index 3 that was removed).

This is why the key should uniquely identify an item, which an index does not do.

---

However, it also means that there are some cases where using the index as the key is acceptable:

• The array will not change
• Or the array will only have items added/removed at the end and will not be reordered
• Or the items are all identical

---

If you cannot use the index as a the key, but cannot uniquely identify items (eg some of the items in the list are identical), a solution may be to use lodash's uniqueId() :

<div v-for="item in data" :key="uniqueId()">

Answer 3

 console.clear() Vue.component("item", { props: ["value"], data() { return { internalValue: this.value } }, template: `<li>Internal: {{internalValue}} Prop: {{value}}</li>` }) new Vue({ el: "#app", data: { items: [{name:'a'},{name:'b'},{name:'c'}] }, methods: { addValue() { this.items = [{name:'a'},{name:6},{name:'b'},{name:'c'}]; } } })

 <script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> <div id="app"> {{items}} <ul> <item v-for="i in items" :value="i.name" :key="i"></item> </ul> <button @click="addValue">AddValue</button> <ul> <item v-for="(i, index) in items" :value="i.name" :key="index"></item> </ul> </div>

To be more clear