Vue Js - クリック時にテーブルからTR grand-parentノードを削除する方法を試行する

Question

clickイベントで要素の特定のgrand-parentノードを削除したいテーブルがあるボタン。 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> 

..あなただけのitemを削除してみましょうことができ、コメントに引き続き

-S

Answer 1

をありがとう再レンダリングで古いDOMが削除されます。

など。現在の項目の参照を渡すためにあなたのハンドラを変更します。

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

次に、あなたのdeleteItem方法でそれをフィルタリング：

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

全例：Vueのは、宣言型のDOMを使用していますhttps://codepen.io/anon/pen/POGgWp