VueJs Fortschrittsbalken zum Verfolgen des VueX-Mutationsfortschritts

Question

Ich habe ein Problem beim Erstellen einer Fortschrittsanzeige, die den Echtzeitfortschritt einer VueX-Mutation verfolgt.

Ich habe eine Schaltfläche Komponente, die eine Mutation ausführt, wenn der Benutzer auf die Schaltfläche klickt. Diese Mutation durchläuft ein Array und führt für jedes Element im Array eine Funktion aus. Während dieser Funktion aktualisiert es einen "Fortschritt" Status im Geschäft. Ich habe eine Fortschrittsbalkenkomponente, die diesen Fortschrittsstatus aus dem Speicher als berechnete Eigenschaft liest.

Ich hatte gehofft, dass, da der Fortschrittsstatus aktualisiert, so würde die Fortschrittsanzeige, aber es scheint, ich habe ein Problem mit dem DOM Rendern der Änderung so schnell wie es aktualisiert wird. Meine Mutation läuft und der Fortschrittsbalken geht von 0 auf 100 ohne dazwischenliegende Aktualisierung.

Ich glaube, ich habe ein Problem Konzeptualisierung, warum mein DOM nicht so schnell ist neu gezeichnet, als ich den ‚Fortschritt‘ Status an Aktualisierung und wenn es eine Möglichkeit, diesen

Answer 1

zu bewerkstelligen, habe ich festgestellt, dass die 'For' Schleife, die ich verwende, um mein Array zu bearbeiten, 'friert' das dom ein und verhindert, dass es erneut gerendert wird. Um dies zu beheben, habe ich einen 'setTimeout' Anruf verwendet. Dies scheint ein Hack zu sein, wird aber hoffentlich anderen helfen, die auf dieses Problem stoßen. Mehr Antworten geschätzt. Danke an @Eric Guan, dass er mich auf diesen Weg gebracht hat. Ich fand die Antwort auf einen anderen Beitrag hier ->How to stop intense Javascript loop from freezing the browser

var self = this; 
     var animals = ['dog', 'cat','lion','tiger','bear']; 
     var processing = function() {    
      var animal = animals.shift(); 
      console.log(animal); 
      if (animals.length > 0) { 
       console.log(animals.length); 
       var timer = setTimeout(processing, 1000); 
       self.$store.commit('updateStatus', {progress : animals.length*20, msg: 'Progress Bar Test', status: 'processing', display: true}); 
      } else { 
       console.log('clearing timeout'); 
       self.$store.commit('updateStatus', {progress : 100, msg: 'Progress Bar Test', status: 'processing', display: false}); 
       clearTimeout(timer); 
      } 
     } 
     processing();