Как правильно удалить элемент v-for в Vue?

Question

У меня есть приложение с панелями, которые вы можете перетаскивать, которые все сгенерированы из базового массива имен, например:

<template>
  <div id="wrapper">
    <nametag
      v-for="(name, i) in guests"
      :key="i"
      :name="name" />
  </div>
</template>

<script>
import Nametag from "@/components/Nametag.vue";

module.exports = {
  name: 'seating',
  components: { Nametag },
  data () {
    return {
      guests: ['Vanessa', 'Lillie', 'Olivia']
    }
  }
};
</script>

Nametag - это компонент со всем кодом для его перемещения по экрану. Х и у, на которых он расположен, являются частью его объекта данных.

Я пытаюсь создать метод для удаления имени из списка гостей, но я не могу просто склеить его из массива, потому что когда я делаю это, все, что знает Vue, теперь это массив другой длины, и некоторые из значения разные. Это просто приводит к удалению последнего компонента в DOM и, при необходимости, переназначению новых имен оставшимся существующим компонентам, которые сохраняют свои позиции x и y. И компонент, который я пытался удалить, не удаляется, ему просто передается новое имя, потому что изменился массив гостей.

По сути, я не знаю, как заставить Vue удалить компонент, который я хочу удалить.

Answer 1

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

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

data () {
  return {
    guests: ['Vanessa', 'Lillie', 'Olivia'].map((name, id) => ({ id, name }))
  }
}

и использовать

<nametag v-for="guest in guests" :key="guest.id" :name="guest.name"/>