问题描述
下面是一个简单的文件上传功能,data里面申明的catalogTable_body,在下面的catalogUpload()函数里面用this调用的时候,会报错未定义catalogTable_body。
这是因为用了 function函数的原因,在函数里面,this是指向函数本身,已经不是外部的默认this了。
export default {
name: "catalog",
data() {
return {
catalogTable_body:{},
}
},
methods: {
catalogUpload(e){
let formData = new FormData();
var ups=qs.parse(document.getElementById('chooseFile').value);
formData.append('file_data', e.target.files[0]);
let url = '/drugs/match/';
let config = {
headers:{'Content-Type':'multipart/form-data'}
};
this.$axios.post(url,formData, config).then(function (response) {
var catalogTableBody=[];
for(var i=1;i<response.data.Sheet1.length;i++){
catalogTableBody.push(response.data.Sheet1[i]);
}
this.catalogTable_body = catalogTableBody;
})
},
},
}
解决方案
使用一个变量that 指向外部的this ,然后调用 that.catalogTable_body 。
export default {
name: "catalog",
data() {
return {
catalogTable_body:{},
}
},
methods: {
catalogUpload(e){
let formData = new FormData();
var ups=qs.parse(document.getElementById('chooseFile').value);
formData.append('file_data', e.target.files[0]);
let url = '/drugs/match/';
let config = {
headers:{'Content-Type':'multipart/form-data'}
};
const that=this;
this.$axios.post(url,formData, config).then(function (response) {
var catalogTableBody=[];
for(var i=1;i<response.data.Sheet1.length;i++){
catalogTableBody.push(response.data.Sheet1[i]);
}
that.catalogTable_body = catalogTableBody;
})
},
},
}