axios onUploadProgress vue?

#vue.js #axios

Вопрос:

Я пытаюсь создать небольшой ProgressBar компонент в vue

Мой родительский компонент выглядит так :

 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) из функции обратного вызова получу ожидаемое значение…

Ответ №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)

1. спасибо; на самом деле нашел тот же ответ и опубликовал его одновременно с вашим ответом

2. Этот ответ не только решает мою проблему, но и действительно помог мне точно понять, для чего 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)
    }
  }
}

1. Будет ли он регистрировать что-либо на созданном крючке?

2. Я имею в виду, извините; Я получаю первый журнал, когда он монтируется со значением 0, но после него ничего не обновляется

Ответ №4:

Вы можете сделать это так

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

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

Загружаемые данные