vue中{ob: observer}对象转化为数组进行遍历方式

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

这篇文章主要介绍了vue中{__ob__: observer}对象转化为数组进行遍历方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue{ob: observer}对象转化为数组进行遍历

情况

在vue中，我们一般会将接口返回的数据，用一个变量进行接收，然后对这个变量进行一系列操作，比如取值，修改，遍历，合并数组等

但是在这个情况中，会发现我们接收到的数据打印出来会是一个{ob: observer}这种形式的。

这个形式的数据是不能像数组进行遍历的。

我们可以使用下面这种方式，可以得到一个正常可使用的对象或者数组啦

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

vue中 [ob: Observer]问题

__ob__: Observer这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。

我就遇到了这种，在created中已经赋值了，但在mounted中又没有，或者有取不到值，

如下图：

收了很多，有的说用JSON.parse(JSON.stringify(数组))再进行赋值但没有用后面看来很多终于解决了

因为vue取值的方式是Ajax异步的，我们还没取到值就开始用了，直接使用一个定时器就可以解决

mounted() {
 setTimeout(()=>{
 //这里就写你要执行的语句即可，先让数据库的数据加载进去数组中你在从数组中取值就好了
 },800)
 }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue使用axios跨域请求数据问题详解
这篇文章主要为大家详细介绍了vue使用axios跨域请求数据的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
elementui el-upload一次请求上传多个文件的实现
使用ElementUI Upload的时候发现如果是默认方案,上传多张图片并不是真正的一次上传多张,本文就来介绍一下elementui el-upload一次请求上传多个文件的实现,具有一定的参考价值,感兴趣的可以了解一下
2023-10-10
手把手教你Vue-cli项目的搭建
这篇文章主要为大家详细介绍了Vue-cli项目的搭建方法，文中图片介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
这篇文章主要介绍了Vue.js实现一个漂亮、灵活、可复用的提示组件示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-03-03
vue中v-model对select的绑定操作
这篇文章主要介绍了vue中v-model对select的绑定操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue常用的几个指令附完整案例
越来越多的人在用Vue，刚开始接触vue的话常接触的指令就几个，统一归纳一下。感兴趣的朋友跟随小编一起看看吧
2018-11-11
Vue多环境代理配置方法思路详解
多人协作模式下，修改代理比较麻烦，而且很容易某个开发人员会修改了vue.config.js文件后提交了。接下来通过本文给大家分享Vue多环境代理配置方法思路详解,需要的朋友可以参考下
2019-06-06
Vue3.0静态文件存放路径与引用方式
这篇文章主要介绍了Vue3.0静态文件存放路径与引用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Taro+vue3 实现电影切换列表功能
我们做类似于猫眼电影的小程序或者H5 的时候我们会做到那种左右滑动的电影列表,这种列表一般带有电影场次,我这个项目是基于Taro +vue3 +ts 来写的用的组件库也是京东的nut-ui以上的代码和组件也有的是我二次封装的组件,对vue3电影切换列表知识,感兴趣的朋友一起看看吧
2024-01-01
解决iview打包时UglifyJs报错的问题
下面小编就为大家分享一篇解决iview打包时UglifyJs报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03