Question

我有一些由v-for创建的组件，我想删除具有下一个组件的组件：

this.products.$remove(this.currentproduct);

我收到下一个错误：“无法读取属性'removeChild'的null”

¿任何想法？，我尝试在组件内部使用$ destroy（），我不能。

提前致谢。

Answer 1

我解决了这个访问组件变量，点和方法的问题。

从父母到孩子：

// Access to destroy child method
<br>
this.$children[index].destroyElement();

子：

// It destroy the component
destroyElement(){
    // Destroy method
    this.$destroy();
},

Answer 2

您可以使用splice：

this.products.splice(this.products.indexOf(this.currentproduct), 1);

<强> [UPDATE]

见下面的例子：

new Vue({
  el: '#app',
  data: {
    items: ['A', 'B', 'C', 'D', 'E', 'F']
  },
  methods: {
    removeItem: function (item) {
      this.items.splice(this.items.indexOf(item), 1);
    }
  }
});

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="app">
  <ul>
    <li v-for="item in items">
      {{ item }}
      
      <button type="button" v-on:click="removeItem(item)">x</button>
    </li>
  </ul>
</div>

Answer 3

在子组件上使用带标记的v-if

<child-component v-if="flag"></child-component>

删除子组件vue js

3 个答案: