Vue3報錯Cannot convert undefined or null to object問題及解決
1、報錯信息
在vue3，vue-cli5的環(huán)境中，出現(xiàn) "Cannot convert undefined or null to object " 的報錯信息
- 報錯截圖如下:
2、問題排查
備份Template里面的標(biāo)記，排除是因為模板語法導(dǎo)致的
如果不是模板里的問題，那么很大概率就是js里出現(xiàn)的問題，可能是在組件創(chuàng)建的時候，也可能是在組件創(chuàng)建完成，執(zhí)行相關(guān)生命周期函數(shù)的時候?qū)е碌膯栴}，比如created，mounted等，把created和mounted函數(shù)里執(zhí)行的相關(guān)代碼注釋，發(fā)現(xiàn)還是報錯，那比較大的可能性就是在extend:Base這一塊，結(jié)合報錯內(nèi)容，可能是存在什么undefine或者null的對象轉(zhuǎn)換，比較大的可能是基類組件的屬性和繼承組件的屬性合并過程中，導(dǎo)致這個錯誤
控制臺沒有打印'page created'，說明組件并沒有創(chuàng)建成功
3、問題定位
如果按照存在undefine或者null轉(zhuǎn)換為對象的問題，因為基類組件的方法不多，問題就很好定位了，只有data()里是空的，基類執(zhí)行合并的時候，data()作為應(yīng)該返回一個數(shù)據(jù)對象，而此處返回的是undefine或者null，于是在合并的時候就報了這個問題
4、解決方法
在data()里返回一個對象，這樣在基類組件的data和繼承組件的data合并時，就不會導(dǎo)致這樣的錯誤，如果存在鍵重復(fù)的情況是否會報其他錯誤?
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue非父子組件通信的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
在Vue中如何使用$refs和ref屬性來操作DOM和組件實例,$refs是一個對象,包含由ref屬性注冊的DOM元素和組件實例,通過$refs可以在Vue中獲取DOM節(jié)點、組件實例、組件數(shù)據(jù)和屬性等2025-10-10
最近在工作中碰到一個問題,后端提供的get請求的接口需要在request header設(shè)置,下面這篇文章主要給大家介紹了關(guān)于axios配置請求頭content-type的相關(guān)資料,需要的朋友可以參考下2022-04-04
Electron+Vue3+Vite搭建桌面應(yīng)用的示例代碼
本文主要介紹了Electron+Vue3+Vite搭建桌面應(yīng)用的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
關(guān)于Vue.js 2.0的Vuex 2.0 你需要更新的知識庫
關(guān)于Vue.js 2.0 的 Vuex 2.0你需要更新的知識庫，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細(xì)介紹了vue面包屑組件的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本文通過實例代碼給大家介紹了Vue2.0權(quán)限樹組件實現(xiàn)代碼，需要的的朋友參考下吧2017-08-08
vuex新手進(jìn)階篇之a(chǎn)ctions的使用方法
actions用來處理mutations中的異步操作,觸發(fā)mutations中的函數(shù),下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之a(chǎn)ctions的使用方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
Vue使用Proxy監(jiān)聽所有接口狀態(tài)的方法實現(xiàn)
這篇文章主要介紹了Vue使用Proxy監(jiān)聽所有接口狀態(tài)的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了Vue一個案例引發(fā)的遞歸組件的使用，本文主要給大家展示如何在項目中使用遞歸組件，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11