Vue 2 - Child component props array not updating after item is deleted in the parent-CodePudding

I've been trying to debug this issue for quite some time. Whenever I delete a vaccine from the parent- the Child Component does not remove that item from the view (i verified the index and also logged the vaccine array in the parent - logs the correct array length including the deleted item). However, the child component does not remove the deleted item from the vue. I've also tried to refetch the vaccines from the DB and still cannot update the view

Interestingly, when I create a new Vaccine (post API) and refetch the values - the vaccine items populate the child table without any issue. Again, this only happens with delete.

I've tried setting vaccine props to the data (renamed to vaccineItems) however this still does not seem to make vaccineItems reactive. I also know using $set is discouraged.

Any help is appreciated and thanks in advance. Parent Component

Vaccine Drawer (Parent)

 <VaccineTable
    :vaccines="vaccines"
     @deleteVaccine="openDeleteConfirmModal"
 />

Vaccine Drawer (Parent) delete method

    deleteVaccineSuccess(index) {
        this.vaccineToDelete = null;
        this.vaccines.splice(index, 1) // this is the correct index
        console.log(this.vaccines) // correctly logs the array of vaccine including the deleted item      
     }

... Vaccine Table (child)

...
   <div  :key="vaccine.uuid" v-for="(vaccine, index) in vaccines">
       {{vaccine.name}}...
    <button @click="deleteVaccine(vaccine, index)">Delete</button>


   </div>

const Name = 'VaccineTable';

const props = {
    vaccines: {
        type: Array,
        required: true,
    },
    vaccineStatus: Number,
    required: true,
    ....
    methods = {    
      deleteVaccine(vaccine, index) {
        this.$emit('deleteVaccine', vaccine, index);
    },

};

CodePudding user response：

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>

CodePudding user response：

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