vue回调函数无法更改model的值

时间:2022-01-09 12:29:47
data:{
isUpload:true,
} 

vue回调函数无法更改model的值

点击上传函数:

vue回调函数无法更改model的值

 getFile(event) {
//选择图片
let eventId = event.target.id;
let type= testImgType(eventId);
if(!type){
return;
}
let fileName = event.target.files[0].name;
let max = testMaxSize(event.target.files[0],1024*3*1024);
if(!max){
return;
}
let width = testImgWidthHeight(eventId,1920,1080,function (res) {
if (!res) {
this.isUpload=false;
console.log( this.isUpload)
vue.$message({
message: '图片尺寸不正确!',
type: 'warning'
});
}else {
this.isUpload=true;
console.log( this.isUpload)
}
});
if(eventId=='addWorkFile'){
this.file = event.target.files[0];
this.workFileName=fileName;
}else{
this.file2 = event.target.files[0];
this.personFileName=fileName;
}
},
//点击上传
submitForm(event) {
console.log(this.isUpload)
if(!this.isUpload){
console.log(this.isUpload)
return;
}

结果isUpload的值没有变化,

原因:

在请求执行成功后执行回调函数中的内容,回调函数处于其它函数的内部this不会与任何对象绑定

解决办法:一)将指向vue对象的this赋值给外部方法定义的属性,然后在内部方法中使用该属性

vue回调函数无法更改model的值

二)使用箭头函数

vue回调函数无法更改model的值

看更改后的结果:

vue回调函数无法更改model的值