can not read/write data in function - vue.js

Question

Hi i am use vue and axios for upload file
Does not recognize the list inside in onUploadProgress
code
data: ()=>({
list: [
{ id:0, icon: 'image', iconClass: 'blue white--text', title: 'Vacation itinerary', file:"asasf.png", progress:100 },
selectedFile: null
]
}),
methods:{
async startUpload(){
let formData = await new FormData();
await formData.append('file', this.selectedFile);
this.selectedFile=null
let config = {
onUploadProgress: function(progressEvent){
console.log(this.list) //is null
this.list[id].progress = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
}
};
this.$axios.$post('/upload/insert', formData, config)
.then(response => {
this.list[id].progress=100
this.list[id].file=response.data.path
})
.catch(error => {
console.log(error)
})
}
}
console.log(this.list) in lone 16 is null

Answer 1

Just change onUploadProgress function to arrow function, otherwise this will be related to the context of onUploadProgress instead of the component.
async startUpload(){
let formData = await new FormData();
await formData.append('file', this.selectedFile);
this.selectedFile=null
let config = {
onUploadProgress: (progressEvent) => {
console.log(this.list) //is null
this.list[id].progress = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
}
};
this.$axios.$post('/upload/insert', formData, config)
.then(response => {
this.list[id].progress=100
this.list[id].file=response.data.path
})
.catch(error => {
console.log(error)
})
}