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" 
    } 
]