0

I have a method that reshapes data pulled from axios requests. Depending on the amount of data, the reshaping can take up to a minute: I am pullling records from an array of C20K objects into a nested structure where the values are in 8 groups of 3 within a container object using a combination of array.forEach() and array.find(). I would like to update the DOM to show how far through the processing we are inside the forEach function but I can't get the DOM to re-render until the method has finished. I have tried using app.nextTick() but it doesn't work for me - I don't really understand it's context. app it the name of my Vue instance

methods:{
  myMethod:{
    let i_counter = 0;
    this.price_groups.forEach(pg=>{
      i_counter = i_counter+1;
      this.state.preparingDataMessage  = "Processing " + i_counter + " of " + this.price_groups.length;
      this.$nextTick(()=>{
        app.state.preparingDataMessage  = "Processing " + i_counter + " of " + app.price_groups.length;
     });
     console.log(this.state.preparingDataMessage );
    })  
  }
}

the console.log() displays correctly in real-time but the DOM does not react to the change in this.state.preparingDataMessage until the method completes

Am I approaching this in the wrong way? All I really want to do is let the user know that the application is still working as is not hanging.

Aaron Reese
  • 544
  • 6
  • 18
  • 2
    That's because VueJS waits for the entire operation to finish before batching the virtual DOM update, so that it does not unnecessarily update the actual DOM when not needed, since it is an expensive operation. – Terry Dec 17 '19 at 10:56
  • https://stackoverflow.com/a/59095359/381282 – Michal Levý Dec 17 '19 at 10:56

0 Answers0