码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-07-02 13:06:20      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:gty   load   尺寸   code   width   str   warning   定义   name   

data:{
isUpload:true,
} 

技术分享图片

点击上传函数:

技术分享图片

 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的值

标签:gty   load   尺寸   code   width   str   warning   定义   name   

原文地址:https://www.cnblogs.com/SimonHu1993/p/9253295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!