vue中匿名函數(shù)無法訪問data中定義的數(shù)據(jù)嗎

methods中定義了一個匿名函數(shù)，訪問data中數(shù)據(jù)時顯示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();
                }
            }
        })

控制臺截圖：

回答

編輯回答

夏夕

function定義的函數(shù)中this指向會被改變，就this已經(jīng)不是指向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 = () => {        // 箭頭函數(shù)不會改變this指向
        console.log(this.show);
    }
    timer();
}

2017年12月8日 14:57

編輯回答

孤星

不應該是this.data.show嗎

2017年12月7日 05:40

編輯回答

挽歌

你現(xiàn)在的this指向的應該是window，你得綁定timer的this,有很多方法，call、apply、bind、箭頭函數(shù)等

2017年3月22日 14:44

編輯回答

巫婆

你的handleclick里面要使用箭頭函數(shù)否則this指向有問題，以后基本都是用箭頭函數(shù)比較好，ES6新特性

2017年10月3日 10:06

編輯回答

孤客

你這個匿名函數(shù)的母對象是hade啥啥函數(shù)并不是vue實例，解決辦法有好多種，比如樓上說的尖頭函數(shù)，或者修改母對象，在或者保存外部this指向為變量進行引入調(diào)用

2017年7月22日 15:06

編輯回答

赱丅呿

你需要緩存一下this

2017年8月26日 19:56

編輯回答

朕略萌

改成箭頭函數(shù),this的指向不同 ()?。剑尽。?/p>

2017年1月16日 21:23

編輯回答

陌如玉

請改用箭頭函數(shù)，不然this的指向就變了

2017年6月1日 07:47

編輯回答

撥弦

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

2017年3月7日 05:59