0

我有一个数组，它使用v-for. 我需要使用: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或一些如此愚蠢的东西，整个事情都会变得疯狂......

4

1 回答 1

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>

如果可能的话，最好给数组中的每个项目一个id并将其用作键：

[
  {
    id: 1,
    name:"jimmy"
  },
  {
    id: 2,
    name:"billy bob"
  },
  {
    id: 3,
    name:"jimmy"
  }
]
于 2017-10-08T20:53:02.100 回答