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>

但是，如果您随后更改了数组，请说删除第2项，每个项目的索引都会改变，所以最终会得到这个：

<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>

如果可能的话，最好为数组中的每个项目添加一个 id ，并将其用作密钥：

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