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新手指南之环境搭建及入门

    Vue新手指南之环境搭建及入门

    vue就是前端上的Java,前端上的C#,有个前端的虚拟DOM引擎,设计理念和Java/C#类似,这篇文章主要给大家介绍了关于Vue新手指南之环境搭建及入门的相关资料,需要的朋友可以参考下
    2021-08-08
  • Vue项目中接口调用的详细讲解

    Vue项目中接口调用的详细讲解

    应公司需求,接口需要对接vue,记录一下碰到的问题,下面这篇文章主要给大家介绍了关于Vue项目中接口调用的详细讲解,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Vue.js 应用性能优化分析+解决方案

    Vue.js 应用性能优化分析+解决方案

    这篇文章主要介绍了Vue.js 应用性能优化分析以及解决方案,VueJS 是开发网站最受欢迎、最稳定的 JavaScript 框架,但与其他框架一样,如果您忽略它,性能就会受到影响,下面我们就一起来看看怎么才能让性能提升吧
    2021-12-12
  • Vue中keep-alive组件的深入理解

    Vue中keep-alive组件的深入理解

    这篇文章主要给大家介绍了关于Vue中keep-alive组件的深入理解,文中通过实例代码结束的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-08-08
  • vue如何利用store实现两个平行组件间的传值

    vue如何利用store实现两个平行组件间的传值

    这篇文章主要介绍了vue如何利用store实现两个平行组件间的传值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue.js中导出Excel表格的案例分析

    vue.js中导出Excel表格的案例分析

    这篇文章主要介绍了vue.js中如何导出Excel表格,在项目中经常会遇到这样的需求,今天小编分步骤通过实例代码给大家详细介绍,需要的朋友可以参考下
    2019-06-06
  • vue使用el-table动态合并列及行

    vue使用el-table动态合并列及行

    这篇文章主要为大家详细介绍了vue使用el-table动态合并列及行,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 在 Vue 中编写 SVG 图标组件的方法

    在 Vue 中编写 SVG 图标组件的方法

    这篇文章主要介绍了在 Vue 中编写 SVG 图标组件的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue中@路径无法跳转到指定文件的解决

    vue中@路径无法跳转到指定文件的解决

    这篇文章主要介绍了vue中@路径无法跳转到指定文件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 在Vue3中使用Vue Tour实现页面导览

    在Vue3中使用Vue Tour实现页面导览

    Vue Tour 是一个方便的 Vue.js 插件,它可以帮助我们在网站或应用中实现简单而灵活的页面导览功能,本文我们将介绍如何在 Vue 3 中使用 Vue Tour,并通过示例代码演示其基本用法,需要的朋友可以参考下
    2024-04-04

最新评论