鍍金池/ 問答/HTML/ vue中匿名函數(shù)無(wú)法訪問data中定義的數(shù)據(jù)嗎

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

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

控制臺(tái)截圖：

clipboard.png

回答
編輯回答
夏夕

function定義的函數(shù)中this指向會(huì)被改變，就this已經(jīng)不是指向vm實(shí)例了
可以改為如下任意方式

handleclick:function() {
    console.log(this.show);
    const that = this;    // 將this傳給另一個(gè)變量，直接使用vm實(shí)例，同下
    var timer = function() {
        console.log(that.show);
    }
    timer();
}
handleclick:function() {
    console.log(this.show);
    var timer = function() {
        console.log(vm.show);    // 直接使用vm實(shí)例
    }
    timer();
}
handleclick:function() {
    console.log(this.show);
    var timer = () => {        // 箭頭函數(shù)不會(huì)改變this指向
        console.log(this.show);
    }
    timer();
}
2017年12月8日 14:57
編輯回答
孤星

不應(yīng)該是this.data.show嗎

2017年12月7日 05:40
編輯回答
挽歌

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

2017年3月22日 14:44
編輯回答
巫婆

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

2017年10月3日 10:06
編輯回答
孤客

你這個(gè)匿名函數(shù)的母對(duì)象是hade啥啥函數(shù)并不是vue實(shí)例，解決辦法有好多種，比如樓上說(shuō)的尖頭函數(shù)，或者修改母對(duì)象，在或者保存外部this指向?yàn)樽兞窟M(jìn)行引入調(diào)用

2017年7月22日 15:06
編輯回答
赱丅呿

你需要緩存一下this

2017年8月26日 19:56
編輯回答
朕略萌

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

2017年1月16日 21:23
編輯回答
陌如玉

請(qǐng)改用箭頭函數(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