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