Vue數(shù)組中出現(xiàn)__ob__:Observer無(wú)法取值問(wèn)題的解決方法
問(wèn)題說(shuō)明
在開(kāi)發(fā)項(xiàng)目中經(jīng)常要從數(shù)據(jù)庫(kù)中拿到數(shù)組然后復(fù)制給新的數(shù)組使用，但是會(huì)發(fā)現(xiàn)有時(shí)候會(huì)發(fā)現(xiàn)帶有 __ob__: Observer 數(shù)組后綴的就是沒(méi)有辦法取到值，更可怕的是 console.log 卻能看得到值。數(shù)組如下圖所示：
解決問(wèn)題
那么針對(duì)這樣的問(wèn)題博客上基本上都是說(shuō)要將數(shù)組轉(zhuǎn)化成string對(duì)象運(yùn)用這個(gè)JSON.parse(JSON.stringify(數(shù)組))再進(jìn)行賦值，然后一頓操作數(shù)組變成空?。?！ 說(shuō)實(shí)話根本不是這個(gè)原因，哎被坑了一下午！
那么首先先解釋一下為什么數(shù)組后面會(huì)出現(xiàn)__ob__: Observer ，這個(gè)后綴其實(shí)是Vue監(jiān)控變量產(chǎn)生的，如果你是使用 push添加的對(duì)象信息就會(huì)出現(xiàn)__ob__: Observer 。
__ob__: Observer并不是說(shuō)不能遍歷不能枚舉那到底為什么還是取不到值呢？？？？，只是因?yàn)槟闾绷?/strong>
我們應(yīng)該考慮到我們?cè)儆胿ue取值的方式是Ajax異步的，換句人話就是說(shuō)，你還沒(méi)有從數(shù)據(jù)庫(kù)中取到值放到對(duì)應(yīng)的數(shù)組中去你那邊就開(kāi)始取值，那肯定是取不到的，所以我們可以有兩種方法，第一種把這個(gè)換成同步的形式等你加載完之后再進(jìn)行取值，或者說(shuō)采用第二種方式就是設(shè)一個(gè)延遲等去取完之后呢你在進(jìn)行賦值即可！那么你就可以看到這個(gè)值了~~
mounted() {
setTimeout(()=>{
//這里就寫(xiě)你要執(zhí)行的語(yǔ)句即可，先讓數(shù)據(jù)庫(kù)的數(shù)據(jù)加載進(jìn)去數(shù)組中你在從數(shù)組中取值就好了
},800)
}結(jié)果圖
收工下班！干飯~
總結(jié)
到此這篇關(guān)于Vue數(shù)組中出現(xiàn)__ob__:Observer無(wú)法取值問(wèn)題的文章就介紹到這了,更多相關(guān)Vue數(shù)組__ob__:Observer無(wú)法取值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue中__ob__:?Observer的踩坑記錄
- Vue之Dep和Observer的用法及說(shuō)明
- vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserver實(shí)例詳解
- 關(guān)于Vue?"__ob__:Observer"屬性的解決方案詳析
- Vue2?Observer實(shí)例dep和閉包中dep區(qū)別詳解
- vue中關(guān)于_ob_:observer的處理方式
- Vue響應(yīng)式原理Observer、Dep、Watcher理解
- vue中{__ob__: observer}對(duì)象轉(zhuǎn)化為數(shù)組進(jìn)行遍歷方式
相關(guān)文章
這篇文章主要介紹了graphQL在前端vue中使用過(guò)程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
漏斗圖常用于可視化業(yè)務(wù)流程中的各個(gè)階段的轉(zhuǎn)換率,例如銷(xiāo)售漏斗或營(yíng)銷(xiāo)漏斗,它可以幫助用戶(hù)識(shí)別流程中的瓶頸和改進(jìn)機(jī)會(huì),本文給大家介紹了如何使用Vue3和Plotly.js繪制交互式漏斗圖,,文中有相關(guān)代碼示例供大家參考,需要的朋友可以參考下2024-07-07
詳解VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件
這篇文章主要介紹了VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue3使用video-player實(shí)現(xiàn)視頻播放
video-player是一個(gè)基于video.js的視頻播放器組件,本文主要介紹了Vue3使用video-player實(shí)現(xiàn)視頻播放,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了vue遠(yuǎn)程加載sfc組件思路詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue中實(shí)現(xiàn)左右聯(lián)動(dòng)的效果
這篇文章主要介紹了vue中實(shí)現(xiàn)左右聯(lián)動(dòng)的效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
vant van-list下拉加載更多onload事件問(wèn)題
這篇文章主要介紹了vant van-list下拉加載更多onload事件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了web前端vue之CSS過(guò)渡效果示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue實(shí)現(xiàn)簡(jiǎn)易選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)易選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
Vue3中引入Pinia存儲(chǔ)庫(kù)使用示例詳解
這篇文章主要介紹了Vue3中引入Pinia存儲(chǔ)庫(kù)使用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03