首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在Vue中删除v-for元素的正确方法是什么?

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

Stack Overflow用户
提问于 2019-05-23 09:03:16
回答 1查看 325关注 0票数 0

我有一个应用程序,你可以拖动面板,这些面板都是由一个基本的名称数组生成的,如下所示:

<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位置的其余现有组件。我试图删除的组件并没有被删除,它只是获得了一个新的名称,因为guests数组已经更改了。

基本上,我不知道如何让Vue删除我想要删除的组件。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-23 09:16:53

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

理想情况下,您的条目将具有唯一的属性。你可以创造出这样的东西。

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

并使用

<nametag v-for="guest in guests" :key="guest.id" :name="guest.name"/>
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56266808

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档