成功解决:[‘‘, ‘‘, __ob__: Observer]

简介: 这篇文章介绍了Vue框架中数组出现`__ob__: Observer`属性的原因和解决方法,说明了Vue如何通过观察者模式实现数据与视图的双向绑定,并提供了如何避免数组被Vue接管导致无法取值的解决方案。

文章目录

  • 1、问题说明
  • 2、问题出现的原因
  • 3、解决方法
  • 4、成功解决

在项目中遇到的实际问题

1、问题说明

我要取一个数组中的数据,对数组中的数据进行处理,但是取出来的不正确。

将要处理的数组打印输出到控制台。看到打印出的数组是这个样子的
在这里插入图片描述

在这里插入图片描述

2、问题出现的原因

为什么数组后面会出现__ob__: Observer ,这个后缀其实是Vue监控变量产生的,如果你是使用 push添加的对象信息就会出现__ob__: Observer 。同步和异步的问题

3、解决方法

设置一个延迟、等数据加载结束后、在操作数据

在这里插入图片描述

4、成功解决

在这里插入图片描述

相关文章
bind、call、apply 区别
bind、call、apply 区别
75 0
|
JavaScript API
Intersection Observer 详解
在一些场景下,尤其是在移动端,我们需要判断元素是否进入用户视口(viewport),来进行以下处理,例如无限滚动,当底部元素进入视口之后加载下一页内容。
376 0
|
开发者
观察者(observer)
观察者(observer)
131 0
观察者(observer)
7、call、apply、bind方法
7、call、apply、bind方法
90 0
rxJava中 Subscriber 与Observer
rxJava中 Subscriber 与Observer
214 0
|
JavaScript
一步一步实现call和apply方法,超简单!
前言 this 指向问题一直是一个老生常谈的问题了!我们对它可以说是又爱又恨,因为 this 指向常常没有按照我们的想法去指向谁,导致程序无缘出现许多 bug。所以我们常常直接强制改变程序中的 this 指向,我们常用的方法有 bind、apply 和 call,bind 与其它两个稍许不同,所以我们本篇文章专门讲解 call 和 apply 方法,并且手动模拟实现它们。
166 0
一步一步实现call和apply方法,超简单!
|
安全 定位技术
Cold Observable 和 Hot Observable
Cold Observable 和 Hot Observable
97 0
Cold Observable 和 Hot Observable
Element.prototype.addDependent will call addAggregation
Element.prototype.addDependent will call addAggregation
120 0
Element.prototype.addDependent will call addAggregation
|
JavaScript
call,apply,方法的使用
//apply和call的使用方法 /* * apply的使用语法 * 函数名字.apply(对象,[参数1,参数2,...]); * 方法名字.apply(对象,[参数1,参数2,.
999 0
|
JavaScript 前端开发
call、apply、bind方法的实现
先分析下3个方法的作用 改变this的指向。 传入参数。 call apply返回函数结果, bind 返回新函数 一、call方法的实现 改变this指向 首先我们知道,对象上的方法,在调用时,this是指向对象的。
1176 0