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) => {
            })