vue在页面加载的时候处理多个异步数据合成最终数据?
两个异步数据通过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个回答

test
2024-07-13
改成这样就ok
lastList() {
return this.menuList.map(item => {
return {...item,...(this.userList.find(element => item.id==element.menuId)||{})}
})
}
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容