首页 文章

以索引为键的Vue for循环会导致不可预测的行为

提问于
浏览 次
0

我有一个数组，使用 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 或者某种愚蠢的东西，整个事情就会变得疯狂......

vue.js vuejs2 v-for

1 回答

  • 0

    使用索引作为键不是一个好主意，因为索引将在数组更改时重新计算 .

    例如，您可能在第一次渲染时有类似的东西：

    <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"
  }
]
    回复于

相关问题