vue中匿名函数无法访问data中定义的数据吗

methods中定义了一个匿名函数,访问data中数据时显示undefined
代码如下:

        var vm = new Vue({
            el:"#root",
            data:{
                show:true
            },
            methods:{
                handleclick:function() {
                    console.log(this.show);
                    var timer = function() {
                        console.log(this.show);
                    }
                    timer();
                }
            }
        })

控制台截图:

clipboard.png

回答:

请改用箭头函数,不然this的指向就变了

回答:

你这个匿名函数的母对象是hade啥啥函数并不是vue实例,解决办法有好多种,比如楼上说的尖头函数,或者修改母对象,在或者保存外部this指向为变量进行引入调用

回答:

            handleclick:function() {
                let that = this;
                var timer = function() {
                    console.log(that.show);
                }
                timer();
            }

回答:

function定义的函数中this指向会被改变,就this已经不是指向vm实例了
可以改为如下任意方式

handleclick:function() {
    console.log(this.show);
    const that = this;    // 将this传给另一个变量,直接使用vm实例,同下
    var timer = function() {
        console.log(that.show);
    }
    timer();
}
handleclick:function() {
    console.log(this.show);
    var timer = function() {
        console.log(vm.show);    // 直接使用vm实例
    }
    timer();
}
handleclick:function() {
    console.log(this.show);
    var timer = () => {        // 箭头函数不会改变this指向
        console.log(this.show);
    }
    timer();
}

回答:

改成箭头函数,this的指向不同 () => {}

回答:

你需要缓存一下this

回答:

你现在的this指向的应该是window,你得绑定timer的this,有很多方法,call、apply、bind、箭头函数等

回答:

不应该是this.data.show吗

回答:

你的handleclick里面要使用箭头函数否则this指向有问题,以后基本都是用箭头函数比较好,ES6新特性

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注