Vue：「内部」機能からデータを設定するにはどうすればよいですか？

Question

私は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を設定できますか？

Answer 1

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 
    }) 
}