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