Vue循環與索引作爲關鍵導致不可預知的行爲

Question

我有一個數組，使用v-for呈現爲一組Vue組件。我需要使用:key=""否則Vue抱怨。

我的數組有沒有唯一標識符，所以我使用索引作爲關鍵

我的循環

<card v-for="(item, index) in questions" :question="item" :key="index">{{item}}</card> 

陣列具有可以具有相同的內容

[{name:"jimmy"}, {name:"billy bob"}, {name:"jimmy"}] 

問題對象：只要我操作數組，結果變得非常不可預測。有時組件被正確渲染。有時在v-for列表中間出現一個新組件，即使它被推入數組中。有時，在轉換/彈出後，所有舊組件都會保留，而新推入的組件不會出現。

代碼

if(this.questions.length > 4) this.questions.shift() 
this.questions.push({name:"willy jim"}) 

如果我使用item.name爲關鍵，它只要沒有重名的工作完全正常。如果我使用item.name+index什麼太傻了，整個事情去瘋狂...

Answer 1

使用指數的一個關鍵是不是該指數將在陣列變化重新計算是個好主意。

例如，你可能對第一像這樣渲染：

<div key="0">Item 1</div> 
<div key="1">Item 2</div> 
<div key="2">Item 3</div> 
<div key="3">Item 4</div> 

但是，如果你再改陣，說你刪除第二項，每個項目的索引將改變所以你最終了這一點：

<div key="0">Item 1</div> 
<div key="1">Item 3</div> 
<div key="2">Item 4</div> 

...而不是：

<div key="0">Item 1</div> 
<div key="2">Item 3</div> 
<div key="3">Item 4</div> 

如果可能的話，這將是股份公司OOD主意，讓您的數組中的每個項目ID，並用其作爲重點來代替：

[ 
    { 
    id: 1, 
    name:"jimmy" 
    }, 
    { 
    id: 2, 
    name:"billy bob" 
    }, 
    { 
    id: 3, 
    name:"jimmy" 
    } 
]