javascript - Vue:如何从“内部”功能中设置数据？

我正在使用Vue和Axios显示进度条。 uploadProgress是Vue实例中的数据密钥。当我尝试使用内部函数进行设置时，它只是说未定义。这是我的代码的简化版本：

someVueMethod() {
  this.uploadProgress = 0 // this works

  let config = {
    onUploadProgress(progress) {
      // this doesn't work, error says uploadProgress is undefined
      this.uploadProgress += progress.loaded / progress.total
    }
  }
  axios.put(url, file, config).then(res => {
    // handle the response
  })
}

如何在该内部函数中设置uploadProgress？

最佳答案

您已将uploadProgress添加到函数someVueMethod的上下文中，但是正尝试在函数onUploadProgress的上下文中访问它。您需要像这样使用原始上下文。

someVueMethod() {
  var self = this; //store the context of someVueMethod
  this.uploadProgress = 0 // this works

  let config = {
    onUploadProgress(progress) {
      // use the original context using self
      self.uploadProgress += progress.loaded / progress.total
    }
  }
  axios.put(url, file, config).then(res => {
    // handle the response
  })
}

关于javascript - Vue:如何从“内部”功能中设置数据？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48002841/