Vue数组中出现__ob__:Observer无法取值问题的解决方法

目录
  • 问题说明
  • 解决问题
  • 结果图
  • 总结

问题说明

在开发项目中经常要从数据库中拿到数组然后复制给新的数组使用，但是会发现有时候会发现带有 __ob__: Observer 数组后缀的就是没有办法取到值，更可怕的是 console.log 却能看得到值。数组如下图所示：

解决问题

那么针对这样的问题博客上基本上都是说要将数组转化成string对象运用这个JSON.parse(JSON.stringify(数组))再进行赋值，然后一顿操作数组变成空！！！ 说实话根本不是这个原因，哎被坑了一下午！

那么首先先解释一下为什么数组后面会出现__ob__: Observer ，这个后缀其实是Vue监控变量产生的，如果你是使用 push添加的对象信息就会出现__ob__: Observer 。

__ob__: Observer并不是说不能遍历不能枚举那到底为什么还是取不到值呢？？？？，只是因为你太着急了

我们应该考虑到我们再用vue取值的方式是Ajax异步的，换句人话就是说，你还没有从数据库中取到值放到对应的数组中去你那边就开始取值，那肯定是取不到的，所以我们可以有两种方法，第一种把这个换成同步的形式等你加载完之后再进行取值，或者说采用第二种方式就是设一个延迟等去取完之后呢你在进行赋值即可！那么你就可以看到这个值了~~

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

结果图

收工下班！干饭~

总结

到此这篇关于Vue数组中出现__ob__:Observer无法取值问题的文章就介绍到这了,更多相关Vue数组__ob__:Observer无法取值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue遍历对象中的数组取值示例

    前几天小项目,没考虑周全,让后端改接口,改成数组中包含对象中包含数组的形式,后来越琢磨越不对,后台把所有数据放在了一个对象里,我拿弹窗数据不好拿,索性又改了回来,把后端折腾够呛,自己也折腾够呛,发上来,以示警戒 改前拿数据 <div class='your-container'> <div class="sortText"> <div>综合排序</div> <div class="sortHot" @click=

  • Vue数组中出现__ob__:Observer无法取值问题的解决方法

    Vue数组中出现__ob__:Observer无法取值问题的解决方法

    目录 问题说明 解决问题 结果图 总结 问题说明 在开发项目中经常要从数据库中拿到数组然后复制给新的数组使用,但是会发现有时候会发现带有 __ob__: Observer 数组后缀的就是没有办法取到值,更可怕的是 console.log 却能看得到值.数组如下图所示: 解决问题 那么针对这样的问题博客上基本上都是说要将数组转化成string对象运用这个JSON.parse(JSON.stringify(数组))再进行赋值,然后一顿操作数组变成空!!! 说实话根本不是这个原因,哎被坑了一下午! 那

  • js中Number数字数值运算后值不对的解决方法

    问题: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎么可能多出这么小数点出来. 我Google了一下,发现原来这是JavaScript浮点运算的一个bug. 比如:7*0.8 JavaScript算出来就是:5.6000000000000005 解决方法:网上找到了一些解决办法,就是重新写了一些浮点运算的函数. 下面就把这

  • 关于Jquery操作Cookie取值错误的解决方法

    使用JQuery操作cookie时 发生取的值不正确的问题: 结果发现cookie有四个不同的属性: 名称,内容,域,路径 复制代码 代码如下: $.cookie('the_cookie'); // 读取 cookie $.cookie('the_cookie', 'the_value'); // 存储 cookie $.cookie('the_cookie', 'the_value', { expires: 7 }); // 存储一个带7天期限的 cookie $.cookie('the_co

  • jquery下checked取值问题的解决方法

    一怒之下,给checkbox加一个isCheck,,不用那该死的checked属性...一切OK了...代码如下: 复制代码 代码如下: <!DOCTYPE html > <html><head> <meta charset="UTF-8"> <title>修复checkbox的状态切换和动态取值的问题</title> <script type="text/javascript" src=

  • javascript中json对象json数组json字符串互转及取值方法

    javascript中json对象json数组json字符串互转及取值方法

    今天用到了json数组和json对象和json类型字符串之间互转及取值,记录一下: 1.json类型的字符串转换为json对象及取值 var jsonString = '{"bar":"property","baz":3}'; var jsObject = JSON.parse(jsonString); //转换为json对象 alert(jsObject.bar); //取json中的值  2.json对象转为json类型的字符串 var js

  • 解决vue数组中对象属性变化页面不渲染问题

    做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染. 换了关键词搜索找到了相关方法. 其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触. 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 你打开控制台,然后用前面例子的 items 数

  • vue如何判断数组中的对象是否包含某个值

    vue如何判断数组中的对象是否包含某个值

    目录 判断数组中的对象是否包含某个值 判断对象是否包含某个属性,el-table formatter判断 1.表格部分 2.方法体部分 判断数组中的对象是否包含某个值 xxx (array, str) { var index = array.findIndex(item => item.id=== str) // var index = array.indexOf(str) // 当数组里的对象为字符串时用这个方法更简单 return index // -1 说明array中不存在id为str的

  • php数组函数序列之array_slice() - 在数组中根据条件取出一段值，并返回

    array_slice()定义和用法 array_slice() 函数在数组中根据条件取出一段值,并返回. 注释:如果数组有字符串键,所返回的数组将保留键名.(参见例子 4) 语法 array_slice(array,offset,length,preserve)参数 描述 array 必需.规定输入的数组. offset 必需.数值.规定取出元素的开始位置. 如果是正数,则从前往后开始取,如果是负值,从后向前取 offset 绝对值. length 可选.数值.规定被返回数组的长度. 如果是负

  • Vue props中Object和Array设置默认值操作

    我就废话不多说,看代码吧~ seller: { type: Object, default() { return {} } } seller: { type: Object, default: function () { return {} } } 当父组件没有传这个值或者值是空时,输出的话,返回: 下面这种是错误的 seller: { type: Object, default: () => {} } 当父组件没有传这个值或者值是空时,输出的话,这时是返回underfind,在template

  • PHP查找数值数组中不重复最大和最小的10个数的方法

    本文实例讲述了PHP查找数值数组中不重复最大和最小的10个数的方法.分享给大家供大家参考.具体如下: 1. php代码如下: //随机生成1万个元素的数组 for($i=0;$i<10000;$i++){ $ary[]=rand(1,100000); } $ary=array_unique($ary); //去重复数值 sort($ary);//顺序排序 $min_10=array_slice($ary,0, 10);//取出最小的10个数值 $max_10=array_slice($ary,-

随机推荐