我有一个应用程序,你可以拖动面板,这些面板都是由一个基本的名称数组生成的,如下所示:
<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删除我想要删除的组件。
发布于 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"/>
https://stackoverflow.com/questions/56266808
复制相似问题