vue 的异步数据遍历

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2516 天前的主题，其中的信息可能已经有所发展或是发生改变。

使用 vue + vuex + axios

代码如下：

let sexList = [// store 里的数据 { code: 0, sexText: '女', }, { code: 1, sexText: '男', } ] let clientList = [// index 页面里的数据 { name: '杨过', sexCode: 1, }, { name: '小龙女', sexCode: 0, } ] mounted() { this.$store.disptch('getSexList')// 获取性别列表 getClientList({data: 'clients'}).then((res) => { if(res.data.success) { this.clientList = res.data.data// 获取客户数据 }else { this.$message.error(res.data.message) } }).catch((err) => { console.log(err) }) }, watch: { clientList(val) {// 监听客户数据，遍历对比 sexList 的 sexCode，放到客户列表里 if(val && val.length > 0) { val.map((item) { this.$store.getters.sexList.map((sex_item) => { if(sex_item.sexCode == item.sexCode) { item.sexText = sex_item.sexText } }) }) } }, }

页面进入的时候并不能实现我想要的效果：监听客户数据 clientList，遍历对比 store 里的 sexList 的 sexCode，把性别 sexText 放到客户列表里

请问一下该怎么解决这个异步的问题？

sexcode

遍历

Data

sextext

5 条回复 2018-11-21 13:44:34 +08:00

airyland

2018-11-21 00:36:10 +08:00

看文档，watch 设置 immediate: true

johnnyNg

2018-11-21 08:59:38 +08:00 via iPhone

mark 一下，待会儿再看

johnnyNg

2018-11-21 10:43:14 +08:00

```js
{
created() {
this.$store.dispatch('getSexList')// 获取性别列表

getClientList({data: 'clients'}).then((res) => {
if(res.data.success) {
this.clientList = res.data.data// 获取客户数据
}else {
this.$message.error(res.data.message)
}
}).catch((err) => {
console.log(err)
})
},

computed: {
myClientList() {
if (this.$store.getters.sexList.length === 0 || this.clientList.length === 0) return []

return this.clientList.map((item) => ({
...item,

...this.$store.getters.sexList.find(({code}) => code === item.sexCode )
}))
}
}
}

```

johnnyNg

2018-11-21 10:44:12 +08:00

语法高亮是怎么弄得，我发的 markdown 不支持？

test4zhou

2018-11-21 13:44:34 +08:00

@johnnyNg 开头应该是```Javascript