解決修復(fù)報(bào)錯(cuò)Error in render:TypeError:Cannot read properties of undefined(reading ‘ipconfig‘)問(wèn)題
請(qǐng)求接口時(shí)，能夠完整渲染出整體界面無(wú)問(wèn)題，但開(kāi)發(fā)者工具仍然報(bào)出：
“Error in render: "TypeError: Cannot read properties of undefined (reading ‘ipconfig’)"
具體如下
解決報(bào)錯(cuò)
意思就是模板在渲染時(shí)候，讀取對(duì)象中的某個(gè)對(duì)象的屬性值時(shí)，這個(gè)對(duì)象不存在，說(shuō)通俗點(diǎn)就是三層表達(dá)式a.b.c，在對(duì)象a中沒(méi)有對(duì)象b，那么讀取對(duì)象a.b.c中的值，自然會(huì)報(bào)錯(cuò)。
如果是兩層表達(dá)式a.b則不會(huì)報(bào)錯(cuò)，返回的是undefined。
明白了原因之后上手排查代碼發(fā)現(xiàn)果然下面vue模板代碼中出現(xiàn)了三層表達(dá)式，十分可疑，出錯(cuò)的地方應(yīng)該就在這里，不過(guò)為什么呢？
原因
我們發(fā)現(xiàn)這里的queryData是vuex中state管理加載的數(shù)據(jù)，異步調(diào)用顯示，然后vue渲染機(jī)制中：
異步數(shù)據(jù)先顯示初始數(shù)據(jù)，再顯示帶數(shù)據(jù)的數(shù)據(jù)，
所以上來(lái)加載queryData時(shí)候還是一個(gè)空數(shù)組如下
當(dāng)渲染完成后，才加載異步數(shù)據(jù)
所以在渲染時(shí)，出現(xiàn)的三層表達(dá)式在queryData中取queryData[0]數(shù)組中的下標(biāo)為0的對(duì)象還不存在
再在這個(gè)對(duì)象中取其他值自然會(huì)報(bào)錯(cuò)，但是渲染完成后，queryData中的值加載好了，自然可以取到，這也就解釋了為什么界面正常顯示，但開(kāi)發(fā)者工具會(huì)報(bào)錯(cuò)的原因。
解決方案
在上面一個(gè)div中添加v-if判斷條件，如果queryData[0]取不到，則不加載該div即可解決。
（注意，不能用v-show，v-show的機(jī)制是加載后，根據(jù)條件判斷是否顯示）
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- 解決springboot項(xiàng)目啟動(dòng)報(bào)錯(cuò)Error creating bean with name dataSourceScriptDatabaseInitializer問(wèn)題
- SpringBoot啟動(dòng)報(bào)錯(cuò)Whitelabel Error Page: This application has no explicit mapping for的解決方法
- MySQL報(bào)錯(cuò)：Starting MySQL ERROR! Couldn‘t find MySQL server (/usr/local/mysql/bin/mysqld_safe)
- 解決ERROR?1129?(HY000):?Host?‘xxx‘?is?blocked?because?of?many問(wèn)題
相關(guān)文章
這篇文章主要介紹了vue3聲明字段名為枚舉的類型方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟
項(xiàng)目完成，我們會(huì)將項(xiàng)目進(jìn)行上線，為了提升性能，我們往往會(huì)進(jìn)行一些優(yōu)化處理，本文主要介紹了vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟，感興趣的可以了解一下2021-07-07
簡(jiǎn)單聊聊Vue中的ref,toRef與toRefs
這篇文章主要是想和大家來(lái)簡(jiǎn)單聊聊Vue中的ref、toRef、toRefs這三個(gè)函數(shù)的使用與區(qū)別，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-04-04
Vue中this.$refs用于訪問(wèn)通過(guò)ref注冊(cè)的元素或組件,需在mounted后使用,可在JS操作DOM或調(diào)用子組件方法,注意避免模板中直接使用2025-08-08
vue實(shí)現(xiàn)移動(dòng)端圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了vue自定義指令directive的相關(guān)資料，下面通過(guò)實(shí)例給大家介紹,需要的朋友可以參考下2018-01-01
VUE使用 wx-open-launch-app 組件開(kāi)發(fā)微信打開(kāi)APP功能
這篇文章主要介紹了VUE使用 wx-open-launch-app 組件開(kāi)發(fā)微信打開(kāi)APP功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
本文主要介紹了el-menu修改item顏色的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue Echarts實(shí)現(xiàn)圖表輪播圖以及圖表組件封裝和節(jié)流函數(shù)優(yōu)化講解
這篇文章主要介紹了在Vue中優(yōu)雅的使用Echarts實(shí)現(xiàn)圖表輪播圖、Echarts圖表組件封裝、節(jié)流函數(shù)優(yōu)化圖表性能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01
在vue中,v-for的索引index在html中的使用方法
下面小編就為大家分享一篇在vue中,v-for的索引index在html中的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03