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

Question

需求:

不同的类型下展示对应的任务,
红色部分是一个数组:
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>

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

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

Answer 1

我建议你用object的形式来做，你不是要区分四个模块吗，数据全部concat在一起不好判断吧。

this.tableData = {}
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);
    // 这里的key需要是不一样的值，好做区分，我看你问题里面都是写的1，特此说明一下
    this.tableData[item.key]= res.list || [];
    this.tableData[item.key].forEach((ele) => {
      this.commentData(ele.taskId);
    });
  });
});

Answer 2

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 来赋值

Answer 3

楼上说的用concat可以解决，至于你说的重复性是你数据里有重复的数据需要去重？