Question

我的容器由不同的div组成。我想点击删除特定的。我的代码（通过vue页面的示例）无法正常工作，我无法理解为什么......可能有一些建议吗？

<div class="m-t-15">
    <div v-for="(tag, index) in $parent.post.tags" v-on:remove="$parent.post.tags.splice(index, 1)" class="btn-group btn-group-sm m-b-5">
        <button type="button" class="btn btn-default" disabled="disabled">@{{ tag.name }}</button>
        <button type="button" class="btn btn-default" v-on:click="$emit('remove')">
            <i class="fa fa-trash"></i>
        </button>
    </div> 
</div>

Answer 1

您不需要像这样访问父级数据。改变父母的数据不是一个好习惯。只需向下传递props，然后将事件发送回父组件。

子组件发出remove事件：

<button @click="$emit('remove', i)">...</button>

父组件：

<child :list="list" @remove="remove"></child>

remove (i) {
  this.list.splice(i, 1)
}

请在此处查看工作示例：http://codepen.io/CodinCat/pen/PmYNBb?editors=1010

如何从VUE中删除列表中的项目？

1 个答案: