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

Posted 2023-02-23

【中文标题】在 Vue 中删除 v-for 元素的正确方法是啥？

【英文标题】：What is the correct way to remove a v-for element in Vue?在 Vue 中删除 v-for 元素的正确方法是什么？

【发布时间】：2019-10-09 12:45:29

【问题描述】：

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

<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 删除我希望它删除的组件。

【问题讨论】：

尝试使用:key="name"代替索引

拼接数组中的值并为键使用有意义的值，在本例中为名称。

但名称不一定是唯一的。如果有两个同名的人，这不会中断吗？ -- 编辑：试过了，它确实会因重复名称而中断。

【参考方案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"/>