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

Question

两个异步数据通过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 },
    ]
  },
},

Answer 1

改成这样就ok

lastList() {
    return this.menuList.map(item => {
        return {...item,...(this.userList.find(element => item.id==element.menuId)||{})}
    })
  }

Answer 2

你先搞清楚你的代码写的是什么。这里为什么要用两层 map？