동적으로 생성 된 구성 요소 삭제 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); 
     } 
     } 
    } 
    } 
});