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/[email protected]/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.