我已经在几个项目中使用了 vue.js，并且我一直在使用索引作为 for 循环中的键
<div v-for="(item, index) in items" :key="index"></div>
...并且开始怀疑这是否存在问题，因为示例通常使用项目的 ID。
<div v-for="(item, index) in items" :key="item.ID"></div>
为什么不总是使用索引作为 vue.js for 循环中的键？
IT技术
javascript
indexing
vue.js
key
v-for
2021-01-24 16:42:29
2个回答
因为数组是可变的。如果项目被添加到数组或从数组中删除，任何给定项目的索引都可以并且将会改变。
您希望您key的唯一值仅标识您的唯一组件。您创建的主键总是比使用索引更好。
这是一个例子。
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>请注意，addValue单击时，顶部的列表表示数组中真正在数组中的新数字；在中间。在按钮下面的第二列表，所述值并没有在阵列中表示的实际位置和所述内部和属性值不不同意。
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>为了更清楚
其它你可能感兴趣的问题