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);
        }
      }
    }
  }
});

删除动态生成的组件VueJS

1 个答案: