快捷導(dǎo)航

vue報(bào)錯(cuò)Cannot?read?properties?of?undefined?(...)類型的解決辦法

更新時(shí)間：2024年04月11日 09:47:33 作者：啵啵啵啵貓

這篇文章主要給大家介紹了關(guān)于vue報(bào)錯(cuò)Cannot?read?properties?of?undefined?(...)類型的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

場(chǎng)景：

在項(xiàng)目中，想要獲取鼠標(biāo)的元素，紅色區(qū)域報(bào)錯(cuò)：Cannot read properties of undefined (reading 'grid3D')

分析：

Cannot read properties of undefined類型的報(bào)錯(cuò)，一般是報(bào)錯(cuò)元素的前一個(gè)元素出了問(wèn)題，也就是this.option沒(méi)有獲取到。

報(bào)錯(cuò)類型一般為兩種：

對(duì)象沒(méi)值的時(shí)候
對(duì)象為undefined的時(shí)候

對(duì)象沒(méi)有數(shù)據(jù)的時(shí)候?yàn)閡ndefined 這個(gè)時(shí)候訪問(wèn)內(nèi)部?jī)?nèi)容就會(huì)報(bào)錯(cuò)

解決方法：

查看一下this.option，注釋掉問(wèn)題代碼，并輸入console.log(this.option)

let option = xxx;
this.rateChart.on("mouseover", (params) => {
        // console.log('params',params);
        if (params.target) {
          // console.log("非空白區(qū)");
        } else {
        //  console.log("空白區(qū)");
          console.log(this.option) 
          // this.option.grid3D.viewControl.alpha =20; // 視角繞 x 軸，即上下旋轉(zhuǎn)的角度
          // this.option.grid3D.viewControl.beta = 70; // 視角繞 y 軸，即左右旋轉(zhuǎn)的角度。
          // this.rateChart.setOption(this.option);
        }
});

發(fā)現(xiàn)輸出undefined，說(shuō)明沒(méi)有找到option，查看上下文，發(fā)現(xiàn)前面已經(jīng)定義了option，不需要用this，直接使用即可。

修改后：

成功解決。

總結(jié)

到此這篇關(guān)于vue報(bào)錯(cuò)Cannot read properties of undefined (...)類型解決辦法的文章就介紹到這了,更多相關(guān)Cannot read properties of undefined內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式
這篇文章主要介紹了vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
VUE前端從后臺(tái)請(qǐng)求過(guò)來(lái)的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
VUE前端從后臺(tái)請(qǐng)求過(guò)來(lái)的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
VUE-ElementUI?時(shí)間區(qū)間選擇器的使用
這篇文章主要介紹了VUE-ElementUI?時(shí)間區(qū)間選擇器的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
基于Vue3的打卡計(jì)時(shí)器實(shí)現(xiàn)方案
在日常工作和生活中,我們經(jīng)常需要記錄時(shí)間間隔,比如工作打卡、學(xué)習(xí)時(shí)長(zhǎng)、項(xiàng)目耗時(shí)等,今天我將為大家介紹一個(gè)基于Vue3的打卡計(jì)時(shí)器實(shí)現(xiàn)方案,需要的朋友可以參考下
2026-03-03
Vue實(shí)現(xiàn)父子組件通信的八種方式
你是不是經(jīng)常遇到這樣的場(chǎng)景？父組件的數(shù)據(jù)要傳給子組件，子組件的事件要通知父組件，兄弟組件之間要共享狀態(tài)...每次寫(xiě)Vue組件通信都覺(jué)得頭大，不知道用哪種方式最合適？別擔(dān)心！今天我就帶你徹底搞懂Vue
2025-11-11
Vue3如何獲取proxy對(duì)象的值而不是引用的方式
這篇文章主要介紹了Vue3如何獲取proxy對(duì)象的值而不是引用的方式,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-10-10
關(guān)于VUE的編譯作用域及slot作用域插槽問(wèn)題
這篇文章主要介紹了VUE 的編譯作用域及slot作用域插槽問(wèn)題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-07-07
Vue通過(guò)路由實(shí)現(xiàn)頁(yè)面間參數(shù)的傳遞
這篇文章主要介紹了Vue通過(guò)路由實(shí)現(xiàn)頁(yè)面間參數(shù)的傳遞,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
vue.js?diff算法原理詳細(xì)解析
這篇文章主要介紹了vue.js?diff算法原理詳細(xì)解析，diff算法可以看作是一種對(duì)比算法，對(duì)比的對(duì)象是新舊虛擬Dom。顧名思義，diff算法可以找到新舊虛擬Dom之間的差異，但diff算法中其實(shí)并不是只有對(duì)比虛擬Dom，還有根據(jù)對(duì)比后的結(jié)果更新真實(shí)Dom
2022-06-06
vue之監(jiān)聽(tīng)器的使用案例詳解
這篇文章主要介紹了vue之監(jiān)聽(tīng)器的使用案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09