解決修復報錯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)了三層表達式，十分可疑，出錯的地方應該就在這里，不過為什么呢？
原因
我們發(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問題
相關文章
本篇文章主要介紹了VUE實現(xiàn)日歷組件功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
methods是如何綁定this的 methods綁定上下文執(zhí)行環(huán)境是通過bind來進行的呢,本文給大家介紹Vue中methods實現(xiàn)原理是什么,感興趣的朋友一起看看吧2023-11-11
這篇文章主要為大家詳細介紹了Vue之ElementUI Form表單校驗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue.js中for循環(huán)如何實現(xiàn)異步方法同步執(zhí)行
這篇文章主要介紹了vue.js中for循環(huán)如何實現(xiàn)異步方法同步執(zhí)行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
在vue3.x中vuex調(diào)取值在html代碼里可以直接使用vue2.x的方法,但是在js里與vue2.x就有了那么一丟丟的不同,下面這篇文章主要給大家介紹了關于Vue3中Vuex詳細使用的相關資料,需要的朋友可以參考下2022-07-07
vue+elementUI實現(xiàn)多文件上傳與預覽功能實戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)
這篇文章主要給大家介紹了關于利用vue+elementUI實現(xiàn)多文件上傳與預覽功能的相關資料,包括word/PDF/圖片/docx/doc/xlxs/txt等格式文件上傳,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
本篇文章主要介紹了在vue-cli中組件通信的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
在本篇文章里小編給大家整理的是一篇關于Vue+ElementUI怎么處理超大表單實例講解內(nèi)容，以后需要的朋友可以跟著學習參考下。2021-11-11
本文主要介紹了Vue.js中el-table表格自定義列控制與拖拽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
vue使用html2canvas實現(xiàn)將DOM節(jié)點生成對應的PDF
這篇文章主要為大家詳細介紹了vue如何使用html2canvas實現(xiàn)將DOM節(jié)點生成對應的PDF,文中的示例代碼簡潔易懂,感興趣的小伙伴可以學習一下2023-08-08