当变量更改 onUploadProgress 时，Vue.js 不会重新渲染 dom答案

【问题标题】：Vue.js doesnt re-render dom when variable changes onUploadProgress当变量更改 onUploadProgress 时，Vue.js 不会重新渲染 dom
【发布时间】：2020-08-26 06:45:31
【问题描述】：

我有以下问题。在我的应用中，用户可以上传图片。我用 axios 上传图片。为了获得更好的用户体验，我想制作一个加载栏。

看起来像这样：

 <div class="loadingbox" :style="{width: loadbar + '%'}"></div>

我的数据如下所示：

  data() {
    return {
      loadbar: 0
    };
  },

Axios 提供了 onUploadProgress 函数，所以我的想法是用它来更新 div 的长度：

 onUploadProgress(e) {
          let step = 100 / e.total;
          this.loadbar = e.loaded * step;
          console.log(this.loadbar);
        },

我的控制台输出是：

但我的 div 宽度根本没有改变。例如，如果我输入loadbar: 50，那么我可以看到 50% 的条形图。

知道为什么 vue.js 没有检测到变化吗？

更新：

我在created()中模拟了它

created() {
    let loaded = 0;
    setInterval(() => {
      loaded += 1000;
      let total = 30000;
      let step = 100 / total;
      this.loadbar = loaded * step;
    }, 1000);
}

在这种情况下它工作得很好。

【问题讨论】：

你能用 setTimeout 模拟一个进度（只有一个变化）吗？结果会一样吗？
@Anatoly 我已经更新了这个问题。我已经模仿它并且它有效
尝试将 this.loadbar 设置成 this.$nextTick: this.$nextTick(() => { this.loadbar = e.loaded * step; console.log(this.loadbar); })
"Vue 异步执行 DOM 更新。每当观察到数据变化时，它会打开一个队列并缓冲同一个事件循环中发生的所有数据变化。"您能否在模板中打印 loadbar 的值并查看它是否正在更新。如果没有，你可以使用 nextTick。
@Himanshu 不，我在模板中也看不到它，我用 nexttick 试试

标签： javascript vue.js axios

【解决方案1】：

似乎唯一的问题是div 是空的。这是我尝试过的一个测试演示：

new Vue({
  el: "#app",
  data() {
    return {
      loadbar: 0
    };
  },
  mounted(){
    let that = this;
    const interval = setInterval(function() {
      that.loadbar += 20;
      console.log(that.loadbar)
      if(that.loadbar === 100)
           clearInterval(interval);
    }, 5000);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div 
      class="loadingbox" 
      style="background-color:red;"
      :style="{width: loadbar + '%'}"
    >loading...</div>
</div>

【讨论】：

【解决方案2】：

我发现了问题。 this 没有绑定到 vue 实例，它绑定到 uploadprogress 本身。我声明了一个变量 self 并将它绑定到我的 vue 实例：

let self = this;
 axios({
        method: "post",
        url: "/api/upload/image/profile_image",
        data: formData,
        onUploadProgress(e) {
          let step = 100 / e.total;
          self.loadbar = e.loaded * step;
        },
        ...
})

【讨论】：