解決vue偵聽器watch,調(diào)用this時(shí)出現(xiàn)undefined的問題
watch偵聽器中,我們要將新的值賦給this.a出錯(cuò)
watch: { value: (newV, oldV) => { this.a = newV; } }
這里報(bào)錯(cuò)undefined,這里錯(cuò)誤的原因是不能寫成箭頭函數(shù)。寫成箭頭函數(shù)后,this會(huì)取上下文,而不是組件里面的this了,正確寫法為:
watch: { value: function(newV, oldV) { this.a = newV; } }
如下圖:
看考鏈接:https://cn.vuejs.org/v2/api/#watch
PS:好吧,雖然問題可以解決,但是具體為什么不能寫成箭頭函數(shù),講實(shí)話,我現(xiàn)在也不懂,知道原理的可以給我評(píng)論,非常感謝。
來自yyf994的評(píng)論解答:
var app = new Vue({ el: '#app', data: { a: 1 }, watch: { a:()=> { console.log(this) } }, methods: { onClick() { this.a++; } } })
在babel 編譯后是這樣子的
"use strict"; var _this = void 0; var app = new Vue({ el: '#app', data: { a: 1 }, watch: { a: function a() { console.log(_this); } }, methods: { onClick: function onClick() { this.a++; } } });
因?yàn)榧^函數(shù) 的 函數(shù)體內(nèi)的this對(duì)象,就是定義時(shí)所在的對(duì)象,而不是使用時(shí)所在的對(duì)象。
補(bǔ)充知識(shí):vue watch用法和沒反應(yīng)的原因 =>看看下面是不是還有一個(gè)watch
我就廢話不多說了,大家還是直接看代碼吧~
watch: { stop: function(newVal, old){ //非josn用法 console.log(newVal) }, 'form.fdnDct': function(newVal, old){ //josn用法 console.log(newVal) }, } //這也是一種用法 watch: { 'browse_integral_info.buy':'RMB', //購(gòu)買積分轉(zhuǎn)化成人民幣 'browse_integral_info.give':'GIVE', //完成邀請(qǐng)瀏覽任務(wù)贈(zèng)送 'bargain_integral_info.give':'BARGAINGIVE', deep:true, }, methods: { RMB: function(){ this.RMBs = this.browse_integral_info.buy/100 }, },
以上這篇解決vue偵聽器watch,調(diào)用this時(shí)出現(xiàn)undefined的問題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中el-table實(shí)現(xiàn)自動(dòng)吸頂效果(支持fixed)
本文主要介紹了vue中el-table實(shí)現(xiàn)自動(dòng)吸頂效果,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09在Vue中使用Echarts實(shí)例圖的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于如何在Vue中使用Echarts實(shí)例圖的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10基于vue-cli3+typescript的tsx開發(fā)模板搭建過程分享
這篇文章主要介紹了搭建基于vue-cli3+typescript的tsx開發(fā)模板,本文通過實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02vue+echarts定時(shí)重新繪制以達(dá)到刷新的動(dòng)效問題
這篇文章主要介紹了vue+echarts定時(shí)重新繪制以達(dá)到刷新的動(dòng)效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vite前端構(gòu)建Turborepo高性能monorepo方案
這篇文章主要為大家介紹了vite前端構(gòu)建Turborepo高性能monorepo方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08vue中調(diào)用HTTP請(qǐng)求的詳細(xì)步驟
這篇文章主要介紹了vue中調(diào)用HTTP請(qǐng)求的詳細(xì)步驟,文中通過代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定幫助,需要的朋友可以參考下2024-07-07vue2.0實(shí)現(xiàn)檢測(cè)無用的代碼并刪除
這篇文章主要介紹了vue2.0實(shí)現(xiàn)檢測(cè)無用的代碼并刪除方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07Vue項(xiàng)目中使用jsonp抓取跨域數(shù)據(jù)的方法
這篇文章主要介紹了Vue項(xiàng)目中使用jsonp抓取跨域數(shù)據(jù)的方法,本文通過實(shí)例代碼講解的非常詳細(xì),需要的朋友可以參考下2019-11-11vue中的事件修飾符once,prevent,stop,capture,self,passive
這篇文章主要介紹了vue中的事件修飾符once,prevent,stop,capture,self,passive,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue面試created中兩次數(shù)據(jù)修改會(huì)觸發(fā)幾次頁面更新詳解
這篇文章主要為大家介紹了vue面試created中兩次數(shù)據(jù)修改會(huì)觸發(fā)幾次頁面更新問題解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12