总结一下我遇到的一个纠结很久的问题。

在项目中需要用到后台的数据对前端渲染,使用到了vue整合的axios,使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data()中定义的属性:

执行后前端报错:

原因:

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

解决方案:

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

二)使用箭头函数

原来
showActionSheet(theme, datas) {
    //取id 的值为this.id
    var data = this.data;
    var info = eval('data.' + datas);
    //console.log(info);
    var button = {};
    for (let i in info) {
        button[info[i]] = function() {
            this.status = info[i];
        }
    }
    $actionSheet.show({
        theme: theme || '',
        title: '标题',
        buttons: button
    });
   //console.log(this.status);
},

修改后

showActionSheet(datas) {
    //取id 的值为this.id
    var data = this.data;
    var info = eval('data.' + datas);
    var button = {};
    for (let i in info) {
        button[info[i]] = ()=> {
            this[datas] = info[i];   //datas是一个变量,,比如 datas=s代替的是this.s=info[i];
        }
    }
    $actionSheet.show({
        theme: 'android',
        title: '标题',
        buttons: button
    });
},
Logo

前往低代码交流专区

更多推荐