Why Not Always Use the Index as the Key in a Vue.Js for Loop

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

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>

Why is the :key attribute needed in vuejs v-for?

As pointed out by thanksd: It is required for vue components when using vue 2.2.0+ :

In 2.2.0+, when using v-for with a component, a key is now required.

Original answer:

As it is said in Vue.js official guide:

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 [...]
It is recommended to provide a key with v-for whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.

You don't need a key attribute in order to use v-for, but it's a good practice, that's why VScode's intelliSense is telling you to add one.

Related Topics