进度条显示与实际进度值不一致

Question

vuetify2.5
我用的进度条组件

<v-progress-linear
    v-model="template_progress"
    color="amber"
    height="25"
    style="width:70%"
    v-if="template_loading"
>
    <template v-slot:default="{ value }">
        <strong>测试 {{ Math.ceil(value) }}%</strong>
    </template>
</v-progress-linear>

然后有一个回调，不停地给template_progress赋值

var self = this
......
self.template_progress = parseInt(data.value)

在使用过程中，回调的速度可能有点快，进度条的显示样式跟不上实际的数值，但是到百分之百的时候就一下子就满了。请教下各位这是为什么？应当如何使数值与样式显示一致？

Answer 1

你可以尝试一下使用

this.$nextTick(() => { 
    this.$set(this, template_progress, parseInt(data.value))
})