[Vuejs]-Vue 2 – Child component props array not updating after item is deleted in the parent

by

0👍

Props are always reactive. Hence, any changes/modifications made in parent will reflect in the child as well.

Your code looks correct only and it should work, I just created a simple code snippet for your reference. Please have a look and try to find out the root cause.

Vue.component('vaccinetable', {
  props: ['vaccines'],
  template: `<div><div v-for="(vaccine, index) in vaccines" :key="index">
       {{vaccine}}
    <button @click="deleteVaccine(index)">Delete</button>
   </div></div>`,
   methods: {
    deleteVaccine(index) {
        this.$emit('delete-vaccine', index);
    }
   }
});

var app = new Vue({
  el: '#app',
  data: {
    vaccines: ['Vaccine 1', 'Vaccine 2', 'Vaccine 3', 'Vaccine 4', 'Vaccine 5']
  },
  methods: {
    deleteVaccine(index) {
        this.vaccines.splice(index, 1);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <VaccineTable :vaccines="vaccines" @delete-vaccine="deleteVaccine">
  </VaccineTable>
</div>

0👍

Because you changed the data vaccines after parent created ( I guess),

@Rohìt Jíndal’s demo works because the data doesn’t change.

In vue2, you should change array with these methods:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

but

vm.items.length = newLength,
vm.items[indexOfItem] = newValue

cannot be observed, https://v2.vuejs.org/v2/guide/list.html#Array-Change-Detection

Leave a comment