解決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會取上下文,而不是組件里面的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對象,就是定義時(shí)所在的對象,而不是使用時(shí)所在的對象。
補(bǔ)充知識: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', //購買積分轉(zhuǎn)化成人民幣
'browse_integral_info.give':'GIVE', //完成邀請瀏覽任務(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的問題就是小編分享給大家的全部內(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ì),對大家的學(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-02
vue+echarts定時(shí)重新繪制以達(dá)到刷新的動(dòng)效問題
這篇文章主要介紹了vue+echarts定時(shí)重新繪制以達(dá)到刷新的動(dòng)效問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vite前端構(gòu)建Turborepo高性能monorepo方案
這篇文章主要為大家介紹了vite前端構(gòu)建Turborepo高性能monorepo方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
Vue項(xiàng)目中使用jsonp抓取跨域數(shù)據(jù)的方法
這篇文章主要介紹了Vue項(xiàng)目中使用jsonp抓取跨域數(shù)據(jù)的方法,本文通過實(shí)例代碼講解的非常詳細(xì),需要的朋友可以參考下2019-11-11
vue中的事件修飾符once,prevent,stop,capture,self,passive
這篇文章主要介紹了vue中的事件修飾符once,prevent,stop,capture,self,passive,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue面試created中兩次數(shù)據(jù)修改會觸發(fā)幾次頁面更新詳解
這篇文章主要為大家介紹了vue面試created中兩次數(shù)據(jù)修改會觸發(fā)幾次頁面更新問題解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12

