删除VUE中V-For元素的正确方法是什么?

Question

我有一个带有面板的应用程序，您可以拖动所有这些都是从基本名称中生成的，例如So：

<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是一个组件，所有代码都将其拖动在屏幕上。x和y位于其数据对象的一部分。

我正在尝试制作一种从访客列表中删除名称的方法，但我不能仅从数组中拼接它，因为当我这样做时值不同。它最终只是删除了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"/>