Vuetify progress bar does not synchronize the value

问题

I have an example that replicates what I'm actually doing. When a new item pushed on the array, the counter is increased and set the value to the progress.

For the example, I prepared a JSFiddle: here

new Vue({
  el: '#app',
  data () {
    return {
      valueDeterminate: 0,
      total: 1000,
      timeOut: 0,
      iteraciones: 1000
    }
  },
  methods: {
    async Click() {
      var arr = [];
      var sum = 0;   
      this.valueDeterminate = 0;
      await this.forEach(this.iteraciones, async (i) => {
        await this.Sleep(1);
        arr.push(1);
        sum++;
        this.SetProgressBar(sum);
        clearTimeout(this.timeOut);
      })      
    },
    SetProgressBar(num) {
      if (num) {
        this.valueDeterminate = Math.round(this.Map(num));
      }
    },
    Map(value) {
      return ((value - 0) * (100 - 0)) / (this.total - 0) + 0;
    },
    async forEach(arr, callback) {
      for(let i = 0; i < arr; i++){
        await callback(arr[i], i);
      }
    },
    Sleep(milisegundos) {
      return new Promise(resolve => this.timeOut = setTimeout(resolve, milisegundos));
    },
  }
})

Just edit the value of 'total' and 'iteraciones' (both must be the same) and run. If the number is high like 1000, the progress has no problems. But if the values are <= 100, the progress does not synchronize the value and his v-model shows the actual value

回答1:

Part of the problem is the animated transition on the progress bar. If you include this in the CSS it all runs fine:

.v-progress-linear__bar, .v-progress-linear__bar__determinate {
  transition: none;
}

While that is sufficient to 'fix' it, it isn't the whole story. So let's get rid of that hack and dig a bit further...

The next problem is that you're updating the progress bar so often that the animated transition doesn't get chance to get going. Every time you update the value it'll start again from the current width. Because this happens every frame that 'current' width never leaves 0. The target width gets larger and larger but it's stuck on the first frame of the animation, which keeps the width at 0.

The reason it appears to work fine with large values, such as 1000, is because of the rounding. Several consecutive values will round to the same value, so effectively nothing changes, allowing the transition to get going. But for smaller values you're updating the value every time, so the animation can't get beyond that first frame.

To see the effect of the rounding directly try changing this line:

this.valueDeterminate = Math.round(this.Map(num));

to this:

this.valueDeterminate = this.Map(num);

Make sure you remove the CSS hack I outlined earlier before running it. You'll find that the progress bar now stalls even with a total of 1000. Without the rounding acting as a buffer we're bombarding the progress bar with tiny updates and resetting the animated transition.

回答2:

I suspect that the progress bar suddenly jumping might have something to do with the browser not keeping up with Vue's rapid update of the virtual DOM.

I think you can deal with this by modifying your sleep interval in relation to your total or iteraciones. Define a new property "sleepInterval" and freeze it using writeable:false;

...
Object.defineProperty(this, 'sleepInterval', {
   value: 4000/this.total, 
   writeable: false
});
await this.forEach(this.iteraciones, async (i) => {
   await this.Sleep(this.sleepInterval);
   arr.push(1);
   sum++;
   this.SetProgressBar(sum);
   clearTimeout(this.timeOut);
})    

Update JSfiddle: https://jsfiddle.net/skribe/refo9vqn/4/

Why did I use 4000 as the dividend? Because it seemed like it just worked well for the situation, giving a quotient for the sleep interval that allows the progress bar to progress at a satisfactory rate. 5000 would work similarly. There may be a better formula that would produce a more accurate sleep interval but could not think of one off the top of my head.

来源：https://stackoverflow.com/questions/56708334/vuetify-progress-bar-does-not-synchronize-the-value