[Vuejs]-Vue delete child component

by

2👍

✅

you can not view the changes when using empty children.

The problem you are facing is:

After you delete any child (supposing the child 1), the component will re-render. And since your naming is based on the indexes only, you will always see the children (1 and 2) left. the reason is because child 2 became 1 and the child 3 became 2 and so on.

Solution

try adding a name property to each component to view the difference. also because childNumber is index + 1 you have to subtract 1 from the index in the delete method.

here is a working Fiddle of your case.

here is the updated code:

Vue.component('parent', {
  template: `
    <div>
      <child v-for='(child, index) in children' :key='index' :childNumber="index+1" 
             v-on:removeChild="removeChild" :name="child.name"/>
    </div>
  `,
  data: function() {
    return {
      children: [{name: 'child 1'}, {name: 'child 2'}, {name: 'child 3'}]
    }
  },
  methods: {
    removeChild: function(index) {
      this.children.splice(index - 1, 1);
    }
  }
});

Vue.component('child', {
  template: `
    <div>
      <input :value="'I am ' + name"></p>
      <button v-on:click="removeChild">Remove {{name}}</button>
    </div>
  `,
  data: function() {
    return {}
  },
  methods: {
    removeChild: function() {
      this.$emit('removeChild', this.childNumber);
    }
  },
  props: ['childNumber', 'name']
});
const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
    }
});
👤Abdelaziz Mokhnache

Leave a comment