Question

我有一个父级组件customer，有一个子级组件contact 客户可以添加尽可能多的组件，现在的问题是，每当我从联系人列表中删除任何联系人时，它总是会删除最后一个联系人。我传递了需要删除的联系人，并且从联系人数组中删除的是正确的但是该组件无法正确删除...请查看代码以获取详细信息...添加一些联系人，并且在删除任何联系人时，最后一个将被删除。这是怎么了？我想念什么？ here是我的代码。我发现了非常相似的问题here，并尝试执行相同的操作，但对我不起作用。

Answer 1

对于有相同问题的任何人，经过三天的研究，这里就是我如何解决此问题的方法……问题是，唯一的键应与for循环一起使用，vue用作更新DOM中正确数据的参考，因此我创建了另一个数组，每当创建一个新组件时，就会生成该组件的ID并将其存储在其中。添加组件时：

addComponent(component) {
    this.components[component].push({id: this.id++})
},

并在for循环中：

<template v-for="(contact, index) in components.contact">
     <create-contact :count="index" @component-dispatched="catchComponent($event, 'contact')"  
          :key="contact.id" @component-removed="removeComponent($event, 'contact', index)">
     </create-contact>
</template>

请参阅小提琴以获得更好的理解。

Answer 2

您应该将整个列表选择为数组，然后选择第一个列表，例如： const list = document.getElementById（'someID'）; //然后您就可以 list[0] // call Jquery on this element to remove it

VueJs-删除动态创建的子组件始终会删除最后一个

2 个答案: