vue中{ob: observer}對象轉化為數組進行遍歷方式

更新時間：2023年10月17日 09:04:07 作者：__十七

這篇文章主要介紹了vue中{__ob__: observer}對象轉化為數組進行遍歷方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue{ob: observer}對象轉化為數組進行遍歷

情況

在vue中，我們一般會將接口返回的數據，用一個變量進行接收，然后對這個變量進行一系列操作，比如取值，修改，遍歷，合并數組等

但是在這個情況中，會發(fā)現我們接收到的數據打印出來會是一個{ob: observer}這種形式的。

這個形式的數據是不能像數組進行遍歷的。

我們可以使用下面這種方式，可以得到一個正?？墒褂玫膶ο蠡蛘邤到M啦

const newData = JSON.parse(JSON.stringify(data))

vue中 [ob: Observer]問題

__ob__: Observer這些數據是vue這個框架對數據設置的監(jiān)控器，一般都是不可枚舉的。

我就遇到了這種，在created中已經賦值了，但在mounted中又沒有，或者有取不到值，

如下圖：

收了很多，有的說用JSON.parse(JSON.stringify(數組))再進行賦值但沒有用后面看來很多終于解決了

因為vue取值的方式是Ajax異步的，我們還沒取到值就開始用了，直接使用一個定時器就可以解決

mounted() {
 setTimeout(()=>{
 //這里就寫你要執(zhí)行的語句即可，先讓數據庫的數據加載進去數組中你在從數組中取值就好了
 },800)
 }

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

element vue Array數組和Map對象的添加與刪除操作
這篇文章主要介紹了element vue Array數組和Map對象的添加與刪除功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-11-11
vue樹形結構數據處理的方法總結
在項目開發(fā)的過程中,會經常使用樹形結構數據,前后端交互都會對數據進行處理,后端返回的數據前端有的時候不能直接使用需要轉換,本文小編整理了一些項目中用到的處理方法,需要的朋友可以參考下
2023-11-11
Vue實現炫酷的代碼瀑布流背景
這篇文章主要為大家詳細介紹了Vue實現炫酷的代碼瀑布流背景，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
vue+elemet實現表格手動合并行列
這篇文章主要為大家詳細介紹了vue+elemet實現表格手動合并行列，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
vue中實現點擊空白區(qū)域關閉彈窗的兩種方法
這篇文章主要介紹了vue中實現點擊空白區(qū)域關閉彈窗的兩種方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
一文詳解Vue3中簡單diff算法的實現
這篇文章主要為大家詳細介紹Vue3中簡單diff算法的實現與使用，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的可以了解一下
2022-09-09
vue中如何使用elementUI表格動態(tài)行合并
這篇文章主要介紹了vue中如何使用elementUI表格動態(tài)行合并，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
elementUI Tree 樹形控件單選實現示例
在ElementUI中樹形控件本身不支持單選功能,本文就來介紹一下如何實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-06-06
vue-element-admin下載到登錄的一些坑
本文主要介紹了vue-element-admin下載到登錄的一些坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-04-04
VUE3中watch監(jiān)聽使用實例詳解
watch函數用來偵聽特定的數據源,并在回調函數中執(zhí)行副作用,下面這篇文章主要給大家介紹了關于VUE3中watch監(jiān)聽使用的相關資料,需要的朋友可以參考下
2022-06-06