axios onUploadProgress + vue？答案

【问题标题】：axios onUploadProgress + vue?axios onUploadProgress + vue？
【发布时间】：2021-02-08 23:47:06
【问题描述】：

我正在尝试在 vue 中构建一个小的 ProgressBar 组件

我的父组件是这样的：

onUploadProgress: function(progressEvent) {
   this.progress = Math.round( (progressEvent.loaded * 100) / progressEvent.total )
   console.log(this.progress)
   }

<ProgressBar :loading="loading" :progress="progress"></ProgressBar>

这是我的子组件：

<template>
   <div v-if="loading" class="progress-bar-wrapper">
     <div class="progress-bar" :style="'width:'+progress+'%'">{{progress+'%'}}</div>
   </div>
</template>

<script>
export default {
  name: "ProgressBar",
  props: {
    loading: {type:Boolean},
    progress:{type:Number, default:0}
  },
  watch: {
   progress(){
     console.log(this.$props.progress)
   }
  }
 }
</script>

我缩小了问题范围，看起来我父母中的this.progress 没有正确更新；如果我在上面放置一个观察者，什么都不会发生：

watch: {
      progress(){
        console.log(this.progress)
      }
    }

但如果我从回调函数中console.log(this.progress) 我得到预期值...

【问题讨论】：

标签： vue.js axios

【解决方案1】：

您有以下问题：

this 不是你的 vue 实例。您是否尝试登录 console.log(this) ？我猜它不会显示你的 vue 实例。

那么如何解决呢？好吧，只是 .bind() 你的 vue 实例

onUploadProgress: function(progressEvent) {
   this.progress = Math.round( (progressEvent.loaded * 100) / progressEvent.total )
   console.log(this.progress)
}.bind(this)

【讨论】：

谢谢；居然找到了同样的答案，和你的回复同时发布了

【解决方案2】：

发现问题；像往常一样使用 vue 你真的需要小心this

这是工作的父组件代码：

let context = this
....
onUploadProgress: function(progressEvent) {
   context.progress = Math.round( (progressEvent.loaded * 100) / progressEvent.total )
}

【讨论】：

【解决方案3】：

在你的watch 中设置immediate = true

watch: {
  progress: {
    immediate: true, 
    handler (newValue, oldValue) {
      console.log(this.progress)
    }
  }
}

【讨论】：

它会在创建的钩子上记录任何内容吗？
对不起；当它以 0 值挂载时，我得到第一个日志，但之后没有任何更新

【解决方案4】：

你可以这样做

const config = {
    ...
    onUploadProgress: progressEvent => {
        this.loadPercentage = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    }
};

axios.post('/url', data, config);

loadPercentage - 在数据中

【讨论】：