时间戳

首页 > 解决方案 > 在 Vue 中删除 v-for 元素的正确方法是什么？

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

问题描述

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

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

标签： javascripthtmlvue.jsvuejs2vue-component

解决方案

为了让 Vue 知道哪个可迭代条目与每个组件相关，您必须提供更好的键。如果添加或删除任意元素，则数组索引不合适。

理想情况下，您的条目将具有独特的属性。你可以创造这样的东西......

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

并使用

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

推荐阅读