删除动态生成的组件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); 
     } 
     } 
    } 
    } 
});