Vue中带有__ob__: Observer的数组没法遍历的问题

1、问题描述

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

若是要使用push就会出现__ob__: Observer

参考：vue中{__ob__: Observer}

 

2、问题分析

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

__ob__: Observer这个属性实际上是Vue监控变量产生的，缘由不在这里。

 

3、解决和总结

别忘了Ajax是异步请求。

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

解决方法就是

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

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

$axios.get(url, {params: param})
            .then(response => {
　　　　　　　　　 // 填充数组操做
                // 在这里遍历数组操做
            }, err => {
            })
            .catch((error) => {
            })