vue中{__ob__: observer}對(duì)象轉(zhuǎn)化為數(shù)組進(jìn)行遍歷方式
vue{__ob__: observer}對(duì)象轉(zhuǎn)化為數(shù)組進(jìn)行遍歷
情況
在vue中，我們一般會(huì)將接口返回的數(shù)據(jù)，用一個(gè)變量進(jìn)行接收，然后對(duì)這個(gè)變量進(jìn)行一系列操作，比如取值，修改，遍歷，合并數(shù)組等
但是在這個(gè)情況中，會(huì)發(fā)現(xiàn)我們接收到的數(shù)據(jù)打印出來會(huì)是一個(gè){ob: observer}這種形式的。
這個(gè)形式的數(shù)據(jù)是不能像數(shù)組進(jìn)行遍歷的。
我們可以使用下面這種方式，可以得到一個(gè)正?？墒褂玫膶?duì)象或者數(shù)組啦
const newData = JSON.parse(JSON.stringify(data))
vue中 [__ob__: Observer]問題
__ob__: Observer這些數(shù)據(jù)是vue這個(gè)框架對(duì)數(shù)據(jù)設(shè)置的監(jiān)控器，一般都是不可枚舉的。
我就遇到了這種，在created中已經(jīng)賦值了，但在mounted中又沒有，或者有取不到值，
如下圖：
收了很多，有的說用JSON.parse(JSON.stringify(數(shù)組))再進(jìn)行賦值但沒有用后面看來很多終于解決了
因?yàn)関ue取值的方式是Ajax異步的，我們還沒取到值就開始用了，直接使用一個(gè)定時(shí)器就可以解決
mounted() {
setTimeout(()=>{
//這里就寫你要執(zhí)行的語句即可，先讓數(shù)據(jù)庫的數(shù)據(jù)加載進(jìn)去數(shù)組中你在從數(shù)組中取值就好了
},800)
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue就是前端上的Java,前端上的C#,有個(gè)前端的虛擬DOM引擎,設(shè)計(jì)理念和Java/C#類似,這篇文章主要給大家介紹了關(guān)于Vue新手指南之環(huán)境搭建及入門的相關(guān)資料,需要的朋友可以參考下2021-08-08
Vue項(xiàng)目中接口調(diào)用的詳細(xì)講解
應(yīng)公司需求,接口需要對(duì)接vue,記錄一下碰到的問題,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中接口調(diào)用的詳細(xì)講解,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue.js 應(yīng)用性能優(yōu)化分析+解決方案
這篇文章主要介紹了Vue.js 應(yīng)用性能優(yōu)化分析以及解決方案，VueJS 是開發(fā)網(wǎng)站最受歡迎、最穩(wěn)定的 JavaScript 框架，但與其他框架一樣，如果您忽略它，性能就會(huì)受到影響，下面我們就一起來看看怎么才能讓性能提升吧2021-12-12
這篇文章主要給大家介紹了關(guān)于Vue中keep-alive組件的深入理解，文中通過實(shí)例代碼結(jié)束的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue如何利用store實(shí)現(xiàn)兩個(gè)平行組件間的傳值
這篇文章主要介紹了vue如何利用store實(shí)現(xiàn)兩個(gè)平行組件間的傳值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue.js中如何導(dǎo)出Excel表格,在項(xiàng)目中經(jīng)常會(huì)遇到這樣的需求，今天小編分步驟通過實(shí)例代碼給大家詳細(xì)介紹，需要的朋友可以參考下2019-06-06
vue使用el-table動(dòng)態(tài)合并列及行
這篇文章主要為大家詳細(xì)介紹了vue使用el-table動(dòng)態(tài)合并列及行，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了在 Vue 中編寫 SVG 圖標(biāo)組件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue中@路徑無法跳轉(zhuǎn)到指定文件的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
在Vue3中使用Vue Tour實(shí)現(xiàn)頁面導(dǎo)覽
Vue Tour 是一個(gè)方便的 Vue.js 插件,它可以幫助我們?cè)诰W(wǎng)站或應(yīng)用中實(shí)現(xiàn)簡(jiǎn)單而靈活的頁面導(dǎo)覽功能,本文我們將介紹如何在 Vue 3 中使用 Vue Tour,并通過示例代碼演示其基本用法,需要的朋友可以參考下2024-04-04