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 同样是响应式的