问题
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>
回答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.
回答2:
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
来源:https://stackoverflow.com/questions/44531510/why-not-always-use-the-index-as-the-key-in-a-vue-js-for-loop