vue 数据（data）赋值问题

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

在项目中需要用到后台的数据对前端渲染，使用到了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
    });
},