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

我正在尝试一种从来宾列表中删除名称的方法，但是我不能只是从数组中剪接它，因为当我这样做时，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"/>

在Vue中删除v-for元素的正确方法是什么？

1 个答案: