快捷導(dǎo)航

Vue數(shù)組中出現(xiàn)ob:Observer無法取值問題的解決方法

更新時間：2022年03月31日 14:28:56 作者：聰明不喝牛奶

__ob__: Observer這個屬性其實是Vue監(jiān)控變量產(chǎn)生的,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)組中出現(xiàn)__ob__:?Observer無法取值問題的解決方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

問題說明

在開發(fā)項目中經(jīng)常要從數(shù)據(jù)庫中拿到數(shù)組然后復(fù)制給新的數(shù)組使用，但是會發(fā)現(xiàn)有時候會發(fā)現(xiàn)帶有 __ob__: Observer 數(shù)組后綴的就是沒有辦法取到值，更可怕的是 console.log 卻能看得到值。數(shù)組如下圖所示：

解決問題

那么針對這樣的問題博客上基本上都是說要將數(shù)組轉(zhuǎn)化成string對象運(yùn)用這個JSON.parse(JSON.stringify(數(shù)組))再進(jìn)行賦值，然后一頓操作數(shù)組變成空?。?！說實話根本不是這個原因，哎被坑了一下午！

那么首先先解釋一下為什么數(shù)組后面會出現(xiàn)__ob__: Observer ，這個后綴其實是Vue監(jiān)控變量產(chǎn)生的，如果你是使用 push添加的對象信息就會出現(xiàn)__ob__: Observer 。

__ob__: Observer并不是說不能遍歷不能枚舉那到底為什么還是取不到值呢？？？？，只是因為你太著急了

我們應(yīng)該考慮到我們再用vue取值的方式是Ajax異步的，換句人話就是說，你還沒有從數(shù)據(jù)庫中取到值放到對應(yīng)的數(shù)組中去你那邊就開始取值，那肯定是取不到的，所以我們可以有兩種方法，第一種把這個換成同步的形式等你加載完之后再進(jìn)行取值，或者說采用第二種方式就是設(shè)一個延遲等去取完之后呢你在進(jìn)行賦值即可！那么你就可以看到這個值了~~

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: