用循环出来的值去请求接口,并展示到页面上

需求:

不同的类型下展示对应的任务,
红色部分是一个数组:
taskStatusList:[{key:1,value: '待办的'},{key:1,value: '进行中'}]
用taskStatusList中的每一项去请求接口

// 任务状态
this.taskStatusList.forEach((item) => {
const params = {
loginName: this.loginName,
pageNum: this.pager.pageNum,
pageSize: this.pager.pageSize,
status: item.value,
};
this.$api.Task.taskList(params, (res) => {
console.log(res);
this.tableData = res.list || [];
this.tableData.forEach((ele) => {
this.commentData(ele.taskId);
});
});
});
<ul class="board-list" v-infinite-scroll="taskListData">
<li class="card clearfix"
v-for="(item, index) in tableData"
:key="index">
<div class="list-title padding">{{ item.title }}         </div>
<li>
</ul>

按照现在的写法出现的问题是:
每个状态下的任务都是一样的,( 后台返回的数据是对的 )

请问怎么让每个状态下回显对应的任务呢?

回答

this.taskStatusList.forEach((item) => {
  const params = {
    loginName: this.loginName,
    pageNum: this.pager.pageNum,
    pageSize: this.pager.pageSize,
    status: item.value,
  };
  this.$api.Task.taskList(params, (res) => {
    console.log(res);
    this.tableData = res.list || [];
    this.tableData.forEach((ele) => {
      this.commentData(ele.taskId);
    });
  });
});

this.tableData = res.list || []; 看上去这里有问题，这里会把值覆盖成最后一次的返回，所以这里应该是 this.tableData = this.tableData.concat(res.list || []);

然后再说如果 commentData 里面会处理，那么可以把 ele 传递进去，可以用 $set 来赋值

以上是 用循环出来的值去请求接口,并展示到页面上 的全部内容， 来源链接： utcz.com/a/32187.html

回到顶部