vue踩坑記錄:屬性報(bào)undefined錯(cuò)誤問題
vue屬性報(bào)undefined錯(cuò)誤
在一個(gè)組件里，通過props傳值進(jìn)去對(duì)象，在控制臺(tái)打印報(bào)錯(cuò)誤信息，提示某屬性不存在。
例如：
<div>{{data.param.aaa}}</div>類似這種的，取對(duì)象子級(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頁(yè)面
*/
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頁(yè)面的時(shí)候，依舊會(huì)判斷是否是管理員或者是否有用戶信息，就陷入了一個(gè)死循環(huán)。
*
*/
解決辦法就是：判斷條件改一下就可以了
fManager || str|| to.path == '/login'
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
nuxt 實(shí)現(xiàn)在其它js文件中使用store的方式
這篇文章主要介紹了nuxt 實(shí)現(xiàn)在其它js文件中使用store的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了Vue虛擬dom是如何被創(chuàng)建的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10
這篇文章主要給大家分享的是vue中v-for指令完成列表渲染，下面文化章就圍繞中v-for的相關(guān)資料在Vue中列表渲染做個(gè)簡(jiǎn)單總結(jié)和使用演示,需要的朋友可以參考一下，希望對(duì)大家有所幫助2021-11-11
這篇文章主要為大家詳細(xì)介紹了vue.js devtools遇到問題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Vue 實(shí)現(xiàn)一個(gè)命令式彈窗組件功能
這篇文章主要介紹了vue實(shí)現(xiàn)命令式彈窗組件功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
Vue?ELement?Table技巧表格業(yè)務(wù)需求實(shí)戰(zhàn)示例
這篇文章主要介紹了Vue?ELement?Table技巧表格業(yè)務(wù)需求實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了Vue3?Reactive響應(yīng)式原理邏輯詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果
這篇文章主要介紹了vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
最近在使用Vue.js時(shí)候沒有自動(dòng)提示,就很難受,下面這篇文章主要給大家介紹了關(guān)于Vue3沒有代碼提示問題的解決辦法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01