Vue數(shù)組中出現(xiàn)__ob__:Observer無法取值問題的解決方法
問題說明
在開發(fā)項(xiàng)目中經(jīng)常要從數(shù)據(jù)庫中拿到數(shù)組然后復(fù)制給新的數(shù)組使用，但是會(huì)發(fā)現(xiàn)有時(shí)候會(huì)發(fā)現(xiàn)帶有 __ob__: Observer 數(shù)組后綴的就是沒有辦法取到值，更可怕的是 console.log 卻能看得到值。數(shù)組如下圖所示：
解決問題
那么針對這樣的問題博客上基本上都是說要將數(shù)組轉(zhuǎn)化成string對象運(yùn)用這個(gè)JSON.parse(JSON.stringify(數(shù)組))再進(jìn)行賦值，然后一頓操作數(shù)組變成空?。?！ 說實(shí)話根本不是這個(gè)原因，哎被坑了一下午！
那么首先先解釋一下為什么數(shù)組后面會(huì)出現(xiàn)__ob__: Observer ，這個(gè)后綴其實(shí)是Vue監(jiān)控變量產(chǎn)生的，如果你是使用 push添加的對象信息就會(huì)出現(xiàn)__ob__: Observer 。
__ob__: Observer并不是說不能遍歷不能枚舉那到底為什么還是取不到值呢？？？？，只是因?yàn)槟闾绷?/strong>
我們應(yīng)該考慮到我們再用vue取值的方式是Ajax異步的，換句人話就是說，你還沒有從數(shù)據(jù)庫中取到值放到對應(yīng)的數(shù)組中去你那邊就開始取值，那肯定是取不到的，所以我們可以有兩種方法，第一種把這個(gè)換成同步的形式等你加載完之后再進(jìn)行取值，或者說采用第二種方式就是設(shè)一個(gè)延遲等去取完之后呢你在進(jìn)行賦值即可！那么你就可以看到這個(gè)值了~~
mounted() {
setTimeout(()=>{
//這里就寫你要執(zhí)行的語句即可，先讓數(shù)據(jù)庫的數(shù)據(jù)加載進(jìn)去數(shù)組中你在從數(shù)組中取值就好了
},800)
}結(jié)果圖
收工下班！干飯~
總結(jié)
到此這篇關(guān)于Vue數(shù)組中出現(xiàn)__ob__:Observer無法取值問題的文章就介紹到這了,更多相關(guān)Vue數(shù)組__ob__:Observer無法取值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue中__ob__:?Observer的踩坑記錄
- Vue之Dep和Observer的用法及說明
- 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}對象轉(zhuǎn)化為數(shù)組進(jìn)行遍歷方式
相關(guān)文章
vue路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3路由傳參方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
本篇文章主要介紹了在vue中使用jointjs的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
由于Vue多個(gè)狀態(tài)分散的跨越在許多組件和交互間各個(gè)角落，大型應(yīng)用復(fù)雜度也經(jīng)常逐漸增長。為了解決這個(gè)問題，Vue提供了vuex。本文將詳細(xì)介紹Vue狀態(tài)管理vuex,需要的朋友可以參考下2020-02-02
Vue?CLI是一個(gè)強(qiáng)大的開發(fā)工具,可用于快速搭建Vue.js項(xiàng)目,在Vue?CLI中使用自定義組件是構(gòu)建交互式和模塊化Web應(yīng)用的重要一環(huán),下面我們就來看看vue?cli中如何使用自定義的組件吧2023-11-11
Vue2+Elementui?Dialog實(shí)現(xiàn)封裝自定義彈窗組件
在日常的管理系統(tǒng)界面中,我們寫的最多的除了列表表格之外,就是各種彈窗組件,本文就來為大家詳細(xì)介紹一下Vue2如何結(jié)合Elementui?Dialog實(shí)現(xiàn)封裝自定義彈窗組件,希望對大家有所幫助2023-12-12
el-upload大文件切片上傳實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了el-upload大文件切片上傳實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了vue的mixins屬性詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
Vue實(shí)例中el和data的兩種寫法小結(jié)
這篇文章主要介紹了Vue實(shí)例中el和data的兩種寫法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-11-11
Vue中實(shí)現(xiàn)v-for循環(huán)遍歷圖片的方法
這篇文章主要介紹了Vue中實(shí)現(xiàn)v-for循環(huán)遍歷圖片的方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
解決vue的router組件component在import時(shí)不能使用變量問題
這篇文章主要介紹了解決vue的router組件component在import時(shí)不能使用變量問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07