Цикл Vue for с индексом в качестве ключа вызывает непредсказуемое поведение

У меня есть массив, который отображается как набор компонентов Vue с использованием 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 или что-нибудь такое глупое, все сходит с ума ...


vue.js vuejs2 v-for
person Kokodoko    schedule 08.10.2017    source источник
comment
Возможный дубликат Почему бы не всегда использовать индекс в качестве ключа в цикле vue.js for?   -  person Eric Guan    schedule 08.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

Использование индекса в качестве ключа - не лучшая идея, поскольку индекс будет пересчитываться при изменении массива.

Например, при первом рендеринге у вас может быть что-то вроде этого:

<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"
  }
]
person Steve Holgado    schedule 08.10.2017