Question

我有一个表，我希望能够使用click事件删除元素的特定祖父节点 - 在本例中是一个按钮。我希望它遍历到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。

E.g。更改处理程序以传递当前项目引用：

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

然后使用deleteItem方法过滤掉它：

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

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

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

1 个答案: