![]()
I have used vue.js for a couple of projects and I have been using the index as the key in the for loops
...and have started to wonder if there are problems with that since examples usually use the ID of the item.
解决方案
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: &＃96;
Internal: {{internalValue}} Prop: {{value}}&＃96;
})
new Vue({
el: "#app",
data: {
items: [1, 2, 3, 4, 5]
},
methods: {
addValue() {
this.items.splice(this.items.length / 2, 0, this.items.length &＃43; 1)
}
}
})
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.
京公网安备 11010802041100号