zoukankan      html  css  js  c++  java
  • Vue中带有__ob__: Observer的数组无法遍历的问题

    一、问题描述

    如果不是Push进数组不会出现__ob__: Observer

    如果要使用push就会出现__ob__: Observer

    参考:vue中{__ob__: Observer}

    二、问题分析

    获取数组长度就是 this.chooseId.length 这个方法的,这个不要怀疑,而你 输出this.chooseId.length 为0 是因为,你获取的时机不对,不信?你把 打印放在一个 setTimeout 函数里。也就是说你还没有给 this.chooseId 添加数据的时候就获取长度了。

    __ob__: Observer这个属性其实是Vue监控变量产生的,原因不在这里。

    三、解决和总结

    别忘了Ajax是异步请求。

    这里我犯了个错,其实不是数组无法遍历,是我在Ajax请求后直接遍历了数组,由于是异步的,第一时间Ajax请求还未收到返回参数,也就还没有添加到数组里,遍历时自然没有内容。

    解决方法就是

    1.把Ajax请求设置为同步的,即async属性设置为false;显然这不是最好的解决方法,使用ajax就是为了异步请求局部刷新,但是这样设置完能保证在一个线程中运行,请求到数据填充结束才访问。

    2.根本解决,遍历数组的操作写在Ajax请求成功填充数组后。

    $axios.get(url, {params: param})
                .then(response => {
              // 填充数组操作
                    // 在这里遍历数组操作
                }, err => {
                })
                .catch((error) => {
                })
  • 相关阅读:
    测试小技巧之常用工具
    测试小技巧之浏览器插件
    可变参数列表
    对象属性和数组元素的初始默认值
    静态块(变量)和非静态块(变量)
    类初始化顺序
    基本类型的重载规则
    构造器访问权限控制
    MySQL Server架构图
    递归与非递归实现树的遍历(java)
  • 原文地址:https://www.cnblogs.com/trnanks/p/11398607.html
Copyright © 2011-2022 走看看