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