javascript - 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