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

时间:2018-10-19 21:44:30

标签: vue.js vue-component

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

2 个答案:

答案 0 :(得分:0)

对于有相同问题的任何人,经过三天的研究,这里就是我如何解决此问题的方法……问题是,唯一的键应与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>

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

答案 1 :(得分:0)

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