Vue Js - 单击触发方法时从表中删除 TR 祖父节点

Question

我有一个表，我希望能够删除带有单击事件的元素的特定祖父节点 - 在本例中为按钮。我希望它遍历到它的 TR 并将其从 DOM 中删除。就目前而言，代码不执行任何操作，没有错误，也没有发生删除。

知道如何实现这一点吗？

脚本示例：

data () {
         return {
            items: []
         }
      },
 methods: {
             deleteItem(event){
                let con = confirm('Are you sure?');
                if(con) {
                   let par = event.target.parentNode.parentNode;
                   for( let i = 0; i < par.length; i++) {
                      if(event) {
                         this.items.items.splice(i, 1);
                      }
                   }
                }
             },
    }

表示例：

<table>
   <thead>
      <tr>
         <th>Item</th>
         <th>Delete</th>
      </tr>
   </thead>
   <tbody>
      <tr v-for="item in items">
         <td><input type="text" v-model="item.q" required></td>
         <td><button v-on:click.prevent="deleteItem">X</button></td>
      </tr>
   </tbody>
</table>

谢谢

-S

Answer 1

继续评论.. 你可以删除item，让重新渲染为你删除旧的DOM。

例如，更改处理程序以传递当前项目引用：

v-on:click.prevent="deleteItem(item)"

然后在deleteItem方法中将其过滤掉：

deleteItem(item) {
  this.items = this.items.filter(it => it !== item);
}

完整示例：https://codepen.io/anon/pen/POGgWp