爲什麼不總是使用索引作爲vue.js for循環中的鍵？

Question

我已經使用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> 

Answer 1

因爲數組是可變。如果項目添加到陣列或從陣列中刪除項目，任何給定項目的索引可以並將更改爲。

你希望你的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是，在上面的列表代表了數組，其中真正在數組中的新號碼;在中間。在按鈕下面的第二個列表中，數值做而不是代表陣列中的實際位置，並且內部和屬性值做而不是同意。