Vuejs在目录/ currentTarget列表中的替代方法

Question

我目前的设置如下：

[{
     name: "test", 
     tags: ["aa","bb","v"]
 }, 
...]

<div class="item" v-for="item in sdList" :data-id="item.id">
      <span @click="deleteTag(item, $event)" v-for="tag in item.tags">{{tag}}</span>
</div>

methods: {
  deleteTag(item,event){
      event.target.style.display = "none";
  }   
}

问题是event.target或event.currentTarget无法正常运作。冒泡结束后currentTarget没有指向元素，有时target指向错误的对象。

我如何在此处实施v-show指令或任何其他解决方案？

Answer 1

如果您确实需要从列表中删除项目，可以将代码更改为

  [{
     name: "test", 
     tags: ["aa","bb","v"]
    }, ...]

<div class="item" v-for="item,index in sdList" :data-id="item.id">
  <span @click="deleteTag(index)" v-for="tag in item.tags">
    {{tag}}
  </span>
</div>

methods: {
 deleteTag(itemIndex){
    this.sdList.splice(itemIndex, 1);
 }   
}