動的に生成されたコンポーネントを削除するVueJS

Question

動的コンポーネントを生成するテーブルがあります。削除ボタンをクリックするか、他のものを処理する場合は削除したいと思います。 ここで何が間違っていたのですか？スプライスを試み、メソッドも削除されていません。 アドバイスをお願いします。

<table> 
<tr is="item-grid" v-for='index in counter'></tr> 
<button @click="counter++" type="button">TEST ADD</button> 
</table> 

<template id="item-template"> 
    <tr> 
     <td><input type="text" class="form-control" v-model="inventory_name" readonly/></td> 
     <td><input type="text" class="form-control" v-model="sku"/></td> 
     <td><input type="text" class="form-control" v-model="qty"/></td> 
     <td><input v-model="unit_price"></input></td> 
     <td><span v-text="unit_total"></span></td> 
     <td><button @click="remove(this)" type="button">delete</button></td> 
    </tr> 
</template> 

Answer 1

これは、蓄積されたデータが子供の間で保持されている親コンポーネントの外に出すことができます。

例：https://jsfiddle.net/wostex/63t082p2/36/

<div id="app"> 
    <ul> 
    <child :text="i" 
    v-for="i in items" :i="i" :key="i" 
    @remove="remove($event)" 
    ></child> 
    </ul> 
</div> 

<script type="text/x-template" id="child"> 
    <li style="cursor: pointer" 
    @click="removeMe(i)">{{ text }}</li> 
</script> 

new Vue({ 
    el: '#app', 
    data: { 
    items: [1,2,3,4,5,6,7,8,9,0] 
    }, 
    methods: { 
    remove: function(i) { 
     this.items.splice(i-1, 1); 
    } 
    }, 
    components: { 
     'child': { 
     template: `#child`, 
     props: ['text', 'i'], 
     methods: { 
     removeMe(i) { 
      this.$emit('remove', i); 
     } 
     } 
    } 
    } 
});