vue 循环数组再次请求后台数据

Question

methods: {
    init() {
        this.getData();
    },
    getData() {
        this.$api.ajax({
            type: 'post',
            url: 'sss',
            success:(res)=> {
                if(res.list && res.list.length) {
                    this.tableList = res.list;
                    this.tableList.map((item,index)=>{
                        item.list = [];
                        this.getListInfo(index, item);
                    })
                }
            }
        });
    },
    getListInfo(index, item) {
        this.$api.ajax({
            type: 'post',
            url: 'ttt',
            data:  {
                id: item.id,
            },
            success:(res)=> {
                this.tableList[index].list = res;
                console.log(this.tableList); //这里能看到最新的list数据
            }
        });
    },
}

为什么我这个数组里循环获取后台数据在console.log下能看到数据但是在页面list是空的，用this.$set来赋值都没有?
是不是这个循环会有问题?

Answer 1

你一开始都没有那个属性，data 里你应该是 tableList:[]，this.tableList[index].list这样你只会更新数据，但不会触发视图，你可以初始化或者用一个对象接收tableList，然后this.tableList = obj;

还有个问题，你这个循环请求如果数据量大的话，超过了浏览器并发请求，可能部分请求会失败，或者造成请求数据响应快慢造成排序错乱问题（比如翻页这种，你可能会先请求到第2页，然后第1页），建议使用promise，队列执行。