vue在页面加载的时候处理多个异步数据合成最终数据?

作者站长头像
站长
· 阅读数 10

两个异步数据通过id和menuId去匹配添加属性,但是总是拿不到最终的lastList,是写法出了问题吗 求教

data() {
  return {
    menuList: [],
    userList: [],
  }
},
computed: {
  lastList() {
    return this.menuList.map((item) => {
      return this.userList.map((element) => {
        if(item.id == element.menuId) {
          return {
            ...item,
            element.job,
            element.age,
          }
        }
      })
    })
  }
},
created() {
  this.getMenu();
  this.getUsres();
},
methods: {
  getMenus() {
    //  通过异步请求获取到数据
    this.menuList = [
      { id:001, name: '张三' },
      { id:002, name: '李四' },
      { id:003, name: '王五' },
    ]
  },
  getUsers() {
    //  通过异步请求获取到数据
    this.userList = [
      { menuId: 001, job: '厨师', age: 10 },
      { menuId: 003, job: '教师', age: 12 },
    ]
  },
},
回复
1个回答
avatar
test
2024-07-13

改成这样就ok

lastList() {
    return this.menuList.map(item => {
        return {...item,...(this.userList.find(element => item.id==element.menuId)||{})}
    })
  }
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容