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

我的容器由不同的

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>

@{{tag.name}

您不需要像这样访问家长的数据。更改父级数据不是一个好做法。只需向下传递道具，并将事件发射回父组件

子组件发出

remove

事件：

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

。。。

父组件：

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

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

删除（i）{
此.列表.拼接（i，1）
}

---

请参见此处的工作示例：

如果项目列表在父组件中，则需要在那里处理数组操作，而不是在子组件中。@Phil真正的问题是，

emit

不工作…显示相应的代码（'remove'侦听器）。。。