刪除動態生成的組件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); 
     } 
     } 
    } 
    } 
});