vue中渲染對(duì)象中屬性時(shí)顯示未定義的解決
后端給的對(duì)象結(jié)構(gòu)是這樣的，三層嵌套
而在最開始的時(shí)候我在data中定義了一個(gè)對(duì)象（dataInfo）接受了圖示所有的屬性
而在template中我要渲染數(shù)據(jù)（dataInfo.clientInfo.deviceName）
然后。。。。在這里插入圖片描述
未定義。。。作為一個(gè)前端菜雞，百思不得其解。
最終在有道的幫助下，告訴我了此屬性不在vue實(shí)例上
恍然大悟
只能解析在data中定義也就是vue實(shí)例上的對(duì)象子一層的東西，對(duì)于孫一層的東西就被解析成不在vue實(shí)例上的
兩種解決方法：
第一：
在定義的dataInfo中定義clientInfo等八個(gè)對(duì)象
第二：
直接定義八個(gè)對(duì)象接收八個(gè)對(duì)象中的東西
這樣，孫一層的東西就在vue實(shí)例上了
補(bǔ)充知識(shí)：vue報(bào)錯(cuò)Cannot read property '_withTask' of undefined
控制臺(tái)報(bào)錯(cuò)：
Cannot read property ‘_withTask' of undefined
原因：
template中的出現(xiàn)的綁定事件在methods中沒有定義
以上這篇vue中渲染對(duì)象中屬性時(shí)顯示未定義的解決就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中集成高德地圖并實(shí)現(xiàn)平移縮放功能
隨著前端技術(shù)的不斷發(fā)展,地圖應(yīng)用在我們的項(xiàng)目中越來(lái)越常見,本文將介紹如何在Vue3項(xiàng)目中集成高德地圖,并通過(guò)簡(jiǎn)單的配置實(shí)現(xiàn)地圖的平移和縮放功能,需要的朋友可以參考下2024-09-09
詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi))
這篇文章主要介紹了詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
elementUI動(dòng)態(tài)嵌套el-form表單校驗(yàn)舉例詳解
最近工作遇到個(gè)需求,表單可以進(jìn)行增加刪除操作,需要進(jìn)行表單校驗(yàn),這篇文章主要給大家介紹了關(guān)于elementUI動(dòng)態(tài)嵌套el-form表單校驗(yàn)的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行的示例代碼
這篇文章主要介紹了vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
一文詳解如何創(chuàng)建Vue3項(xiàng)目及組合式API
Vue3提供了一種組合式API,可以用來(lái)構(gòu)建可復(fù)用的組件和應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建Vue3項(xiàng)目及組合式API的相關(guān)資料,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vue實(shí)現(xiàn)移動(dòng)端可拖拽式icon圖標(biāo)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端可拖拽式icon圖標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue?props使用typescript自定義類型的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue?props使用typescript自定義類型的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-01-01
Nuxt3:拉取項(xiàng)目模板失敗問(wèn)題以及解決
文章描述了在使用官網(wǎng)命令創(chuàng)建Nuxt3項(xiàng)目時(shí)遇到的問(wèn)題,通過(guò)分析命令,推測(cè)問(wèn)題出在拉取項(xiàng)目模板失敗,解決方法是手動(dòng)訪問(wèn)并下載項(xiàng)目模板,解壓后按照官網(wǎng)教程安裝依賴并啟動(dòng),最終成功解決問(wèn)題2024-12-12
父組件向子組件傳值的時(shí)候,子組件是通過(guò)props來(lái)接收的,然后以變量的形式將props傳遞到setup語(yǔ)法糖果中使用,本文給大家介紹vue3 setup語(yǔ)法糖之父子組件之間的傳值,感興趣的朋友一起看看吧2023-12-12
Vue局部組件數(shù)據(jù)共享Vue.observable()的使用
隨著組件的細(xì)化，就會(huì)遇到多組件狀態(tài)共享的情況，今天我們介紹的是 vue.js 2.6 新增加的 Observable API ，通過(guò)使用這個(gè) api 我們可以應(yīng)對(duì)一些簡(jiǎn)單的跨組件數(shù)據(jù)狀態(tài)共享的情況，感興趣的可以了解一下2021-06-06