vue.js - Vue js DOM not updating

Question

I have a few components: A, B , C in component A i have an array.

When i select an item from component A:

I have an emit to a method in component B that show filesArray.length with data:{filesArray:[]}

Inside component B i have component C with props: filesArray

When i'm adding a file in component C it looks like this: filesArray.push(myFile);

My issue: When i select an item from component A and then adding a file in component C

• for the first few times it's updating the filesArray.length and i can see the length of the array.

• for the third or firth time it show filesArray.length 0 even if push item in component C.

What have i tried: return filesArray.length in component B as computed:

 computed:{
    filesArrayLength(){
      debugger
      return this.filesArray.length;
    }
  },

and it didn't work, and i have tried to use watch. and it also didn't work

question from:https://stackoverflow.com/questions/66066701/vue-js-dom-not-updating

Answer 1

You shouldn't mutate props directly, and even if you do I don't think you can expect it to reliably update the data in the parent. Component C should be emitting an event whenever you want to add an item to filesArray so that Component B can append it.