v-for使用computed获取不到数据

Question

<Select v-model="pageParam.data.state" @on-change="getCityList" style="width:140px" placeholder="请选择省份">
  <Option v-for="item in provinceList" :value="item.areaId" :key="item.areaId">{{ item.areaName }}</Option>
</Select>

computed: {
  provinceList: () => {
    util.getProvinceList()
      .then(data => data)
      .catch(err => {
        this.$Message.error('获取省份列表失败')
        return []
      })
  }
}

我使用的iView + Vue，上面的代码，data数据能正常返回，但是下拉框却是空的，为什么啊？

Answer 1

computed中的计算属性需要有一个返回值，你这里看似有返回值，但是返回到哪里去了？

无论是then还是catch中的返回都是传递到Promise的下一个状态中，不能作为provinceList的返回值，就是不拿es6的Promise来说，函数嵌套，内层函数的返回值也不会作为外层函数的返回值返回出去

你这个可以在钩子函数中请求到数据后，在赋值到provinceList上去

Answer 2

承接上面的第一句，computed中的计算属性需要有一个返回值，
首先如果数据请求成功的话走的是then不会进入到catch里面。你在then里面几乎什么都没有干。而且如果你在promise里面返回的话。不仅不能当做计算属性provinceList的返回值。而且return是作为下一个then的res使用的。而且你并没有用。所以你的provinceList也只是个声明状态