vue watch監(jiān)聽(tīng)取不到this指向的數(shù)問(wèn)題
vue watch監(jiān)聽(tīng)取不到this指向的數(shù)
同事問(wèn)我，watch里this指向的數(shù)值，別的地方卻可以打印出來(lái)。工具也能看到數(shù)值，但打印出來(lái)卻是undifined，先看看代碼：
懶得打字了直接上截圖吧
ps：
在Vue組件中，如果你在watch選項(xiàng)中訪問(wèn)this指向的數(shù)據(jù)，有可能無(wú)法獲取到數(shù)據(jù)，因?yàn)?code>this的指向在箭頭函數(shù)中不會(huì)指向Vue實(shí)例。
解決方法
使用常規(guī)函數(shù)而不是箭頭函數(shù)來(lái)定義watch中的回調(diào)。
javascriptwatch: {
apiData: function(newVal, oldVal) {
// 在這里，this指向Vue實(shí)例，可以訪問(wèn)this.apiData
}
}如果你使用箭頭函數(shù)，并且需要訪問(wèn)Vue實(shí)例的方法或數(shù)據(jù)，可以在data中定義一個(gè)變量來(lái)存儲(chǔ)this的引用。
javascriptdata() {
return {
vm: this // 存儲(chǔ)Vue實(shí)例的引用
};
},
watch: {
apiData: (newVal, oldVal) => {
// 使用 this.vm 來(lái)訪問(wèn)Vue實(shí)例的數(shù)據(jù)和方法
}
}使用watch的第三個(gè)參數(shù)immediate，設(shè)置為true可以讓watch立即觸發(fā)。
javascriptwatch: {
apiData: {
handler: (newVal, oldVal) => {
// 處理數(shù)據(jù)變化
},
immediate: true // 組件創(chuàng)建后立即觸發(fā)一次
}
}確保你的watch監(jiān)聽(tīng)的數(shù)據(jù)在組件創(chuàng)建之前已經(jīng)被定義，否則可能無(wú)法觸發(fā)watch。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示
這篇文章主要介紹了vue如何實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇博客針對(duì)axios庫(kù)的核心代碼做一個(gè)簡(jiǎn)要總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
項(xiàng)目中需要制作一個(gè)雙擊編輯單擊選中可刪除Tag標(biāo)簽,本文就來(lái)介紹一下如何實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
vue-quill-editor 自定義工具欄和自定義圖片上傳路徑操作
這篇文章主要介紹了vue-quill-editor 自定義工具欄和自定義圖片上傳路徑操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue中遇到scrollIntoView無(wú)效問(wèn)題及解決
這篇文章主要介紹了vue中遇到scrollIntoView無(wú)效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue EventSource使用及配置請(qǐng)求頭、webpack代理配置教程
EventSourcePolyfill是EventSource封裝的一個(gè)方法,可以配置請(qǐng)求頭,安裝依賴后,不需要加請(qǐng)求頭時(shí)直接使用,需要加請(qǐng)求頭時(shí)可以自定義請(qǐng)求頭,基于webpack的vue項(xiàng)目,需要配置代理以解決跨域問(wèn)題,設(shè)置devServer的compress屬性為false以實(shí)時(shí)收到EventSource的消息2025-12-12
vue3.0?router路由跳轉(zhuǎn)傳參問(wèn)題(router.push)
這篇文章主要介紹了vue3.0?router路由跳轉(zhuǎn)傳參問(wèn)題(router.push)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Vue2中pinia刷新后數(shù)據(jù)丟失的問(wèn)題解決
Pinia是一個(gè)Vue.js狀態(tài)管理庫(kù)，如果你在組件中修改了store中的數(shù)據(jù)并刷新了界面，Pinia會(huì)將store中的數(shù)據(jù)重置為初始值，從而導(dǎo)致數(shù)據(jù)丟失的問(wèn)題，本文就來(lái)介紹一下問(wèn)題解決，感興趣的可以了解一下2023-12-12
這篇文章主要為大家介紹了Vue項(xiàng)目的打包方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
在網(wǎng)上找了好久關(guān)于左右過(guò)渡動(dòng)畫折疊的組件,沒(méi)有合適的代碼,效果類似于element UI中的Drawer抽屜組件,只不過(guò)ele中的都是懸浮的組件,工作中遇到的很多都是占用空間的展開(kāi)折疊,網(wǎng)上很多也是上下展開(kāi)收起的組件,于是就自己寫了一個(gè),分享給大家,感興趣的朋友參考下吧2023-11-11