vue踩坑記錄:屬性報(bào)undefined錯(cuò)誤問題
vue屬性報(bào)undefined錯(cuò)誤
在一個(gè)組件里，通過props傳值進(jìn)去對象，在控制臺(tái)打印報(bào)錯(cuò)誤信息，提示某屬性不存在。
例如：
<div>{{data.param.aaa}}</div>類似這種的，取對象子級(jí)下面的值，就報(bào)了undefined。
原因應(yīng)該是在初始傳值，最多默認(rèn) data={}。
我嘗試在props里設(shè)置好默認(rèn)值，但是依然報(bào)錯(cuò)
這么設(shè)置的props：
props:{
? ? data:Object,
? ? default:function(){
? ? ? ?return {
? ? ? ? ? ? ?param:''
? ? ? ? }
? ? }
}這么設(shè)置，依然報(bào)錯(cuò)。 這個(gè)報(bào)錯(cuò)，應(yīng)該是在父組件初始化了 data={}導(dǎo)致的。
最終解決方法
<div v-if="data.param">{{data.param.aaa}}</div>加一個(gè)if判斷，就可以了。
vue之各種報(bào)錯(cuò)問題
1 、undefined is not iterable!或者null is not iterable!"
null和undefine是不可以拿來循環(huán)的，拿來循環(huán)就會(huì)報(bào)上面這個(gè)錯(cuò)誤，循環(huán)的時(shí)候判斷一下，不為null或者undefine的時(shí)候再拿來循環(huán)就可以了~~
2、Duplicate keys detected: ‘funs1’. This may cause an update error.
原因： key值不唯一
解決: 仔細(xì)檢查是否用了同一個(gè)數(shù)據(jù)循環(huán)且:key值相同，如果相同給第二個(gè)key隨便加一個(gè)標(biāo)記就可以，如下：
:key=“index + ‘-only’”
3、報(bào)錯(cuò)內(nèi)容：Maximum call stack size exceeded
這個(gè)一般都是路由的堆棧溢出的原因
說白了就是你寫了死循環(huán)。
比如我的這個(gè)代碼哈：
/**
*ifManager 是否是管理員
*str 是否有用戶信息
*在路由跳轉(zhuǎn)之前判斷是否是管理員或者是否有用戶信息，如果沒有就跳轉(zhuǎn)到login頁面
*/
router.beforeEach((to, from, next) => {
if (ifManager || str) {
next()
} else {
next(false);
router.push('/login')
}
}）
/**
*乍一看好像沒有什么問題，但是一運(yùn)行就會(huì)出現(xiàn)上面的那個(gè)錯(cuò)誤，為什么呢。因?yàn)楫?dāng)我們跳到login頁面的時(shí)候，依舊會(huì)判斷是否是管理員或者是否有用戶信息，就陷入了一個(gè)死循環(huán)。
*
*/
解決辦法就是：判斷條件改一下就可以了
fManager || str|| to.path == '/login'
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue安裝和使用scss及sass與scss的區(qū)別詳解
這篇文章主要介紹了vue安裝和使用教程，用了很久css預(yù)編譯器，但是一直不太清楚到底用的sass還是scss，直到有天被問住了有點(diǎn)尷尬，感興趣的朋友一起看看吧2018-10-10
vue在index.html中引入靜態(tài)文件不生效問題及解決方法
這篇文章主要介紹了vue在index.html中引入靜態(tài)文件不生效問題及解決方法，本文給大家分享兩種原因分析，通過實(shí)例代碼講解的非常詳細(xì) ,需要的朋友可以參考下2019-04-04
路由守衛(wèi)（Route?Guards）是?Vue?Router?的一個(gè)功能,它允許我們在路由發(fā)生之前執(zhí)行邏輯判斷,這篇文章主要為大家介紹了Vue中路由守衛(wèi)的具體應(yīng)用,需要的可以了解下2024-03-03
Element?Plus，由餓了么大前端團(tuán)隊(duì)開源出品的一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于?Vue?3.0?的組件庫，Element?Plus是基于Vue3面向設(shè)計(jì)師和開發(fā)者的組件庫，提供了配套設(shè)計(jì)資源，幫助你的網(wǎng)站快速成型2022-12-12
這篇文章主要介紹了vue附件下載無法打開的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue3-新特性defineOptions和defineModel示例詳解
在Vue3.3中新引入了defineOptions宏主要是用來定義Option API的選項(xiàng),可以用defineOptions定義任意的選項(xiàng),props、emits、expose、slots除外,本文給大家介紹Vue3-新特性defineOptions和defineModel,感興趣的朋友一起看看吧2023-11-11
基于canvas實(shí)現(xiàn)手寫簽名（vue）
這篇文章主要為大家詳細(xì)介紹了基于canvas實(shí)現(xiàn)簡易的手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要為大家介紹了Vue布置導(dǎo)航守衛(wèi)獲取用戶信息，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
在Vue.js開發(fā)中,我們經(jīng)常需要?jiǎng)?chuàng)建可復(fù)用的組件,這些組件可能會(huì)有自己的樣式規(guī)則,而有時(shí)我們希望父組件能夠影響子組件的樣式,本文將詳細(xì)介紹如何使用v-deep以及一些相關(guān)的最佳實(shí)踐,需要的朋友可以參考下2024-10-10
Vue項(xiàng)目移動(dòng)端滾動(dòng)穿透問題的實(shí)現(xiàn)
這篇文章主要介紹了Vue項(xiàng)目移動(dòng)端滾動(dòng)穿透問題的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05