[Vue warn]: обнаружены повторяющиеся ключи: x. Это может вызвать ошибку обновления

Question

Я получаю сообщение об ошибке, когда добавляю в массив элемент с повторяющимся идентификатором.

т.е.

active_widgets:Array[4]
0:Object
    id:1
    name:"Text Blocks"
    selected:false
    set:false
1:Object
    id:3
    name:"Bibliographies/References"
    selected:false
    set:false
2:Object
    id:1
    name:"Text Blocks"
    selected:false
    set:false
3:Object
    id:2
    name:"Free Text"
    selected:"Test"
    set:false

В моем сценарии элемент id может дублироваться, поскольку пользователь может иметь один и тот же виджет на странице несколько раз. Я хочу знать, могу ли я подавить или убрать предупреждение, которое VueJS продолжает выдавать в консоли.

Answer 1

Одна и та же клавиша для разных циклов v-for, вызывающая это предупреждение. Вы можете избежать этого, используя разные клавиши для разных петель v-for.

<div v-for="(item, i) in items" :key="i"></div>

<div v-for="(item, i) in items2" :key="'A'+ i"></div>

<div v-for="(item, i) in items3" :key="'B',+ i"></div>

//here A,B's sample characters.you can take any character in that place 

Answer 2

Альтернативный метод:

Вложение элементов v-for внутри любого другого элемента также работает.

<div>
    <div v-for="(item, index) in items" :key="index"></div>
</div>

<div>
    <div v-for="(item, index) in items2" :key="index"></div>
</div>

Answer 3

Вам необходимо привязать к key уникальное значение. Невыполнение этого требования приведет к проблемам в вашем приложении, когда изменение данных для компонента с одним ключом обновляет этот компонент, а другой компонент с помощью дубликата ключа.

Вы должны назначить уникальное свойство ключа каждому из элементов в массиве active_widgets, а затем связать ключ с этим свойством.

---

Не видя ни одного вашего кода, я не знаю, каков ваш уникальный вариант использования. Но вот пара способов, которыми вы можете добавить уникальное свойство ключа к элементам в вашем массиве.

Вот пример, который делает это в методе created.

created() {
  this.active_widgets.forEach((item, index) => this.$set(item, 'key', index));
}

Если вам нужно добавить уникальный ключ при добавлении элемента в этот массив, вы можете сохранить счетчик и увеличивать его при каждом добавлении:

let WidgetCount = 0;

export default {
  data() {
    return { active_widgets: [] }
  },
  methods: {
    addWidget(id, name) {
      this.active_widgets.push({ 
        id, 
        name, 
        selected: false,
        set: false, 
        key: WidgetCount++
      })
    }
  }
}