快捷搜索: 长连接 前端 源码 pan

vue ajax传输数组,vue 循环数组再次请求后台数据

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来赋值都没有?

是不是这个循环会有问题?

回答

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

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

map改成forEach

this.tableList.map((item,index)=>{

this.$set(this.tableList[index], list, []); // 或者this.$set(item, list, []);

this.getListInfo(index, item);

})

对象新增属性是无法响应式,通过set确保这个新 property 同样是响应式的

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来赋值都没有? 是不是这个循环会有问题? 回答 你一开始都没有那个属性,data 里你应该是 tableList:[],this.tableList[index].list这样你只会更新数据,但不会触发视图,你可以初始化或者用一个对象接收tableList,然后this.tableList = obj; 还有个问题,你这个循环请求如果数据量大的话,超过了浏览器并发请求,可能部分请求会失败,或者造成请求数据响应快慢造成排序错乱问题(比如翻页这种,你可能会先请求到第2页,然后第1页),建议使用promise,队列执行。 map改成forEach this.tableList.map((item,index)=>{ this.$set(this.tableList[index], list, []); // 或者this.$set(item, list, []); this.getListInfo(index, item); }) 对象新增属性是无法响应式,通过set确保这个新 property 同样是响应式的
经验分享 程序员 微信小程序 职场和发展