Vue.js异步获取数据后v-for渲染列表未生效问题求解

• 模板中v-for遍历的this.getData是异步函数本身，不是最终返回的业务数据。异步函数执行后返回的是Promise对象，v-for无法直接遍历Promise得到你需要的商品数组。
• mounted生命周期中调用getData后，没有将返回的结果存入组件的响应式数据中，Vue无法监听到数据变化触发重新渲染。
• Vue模板中访问实例属性不需要加this前缀，冗余的this可能导致变量解析失败。

1. 首先在组件data选项中声明响应式变量存储最终要渲染的列表数据：

data() {
  return {
    // 保留你原有声明的其他变量
    skuList: [] // 新增响应式变量，存储接口返回后合并完成的商品列表
  }
}

2. 修改mounted中的逻辑，将getData返回的结果赋值给响应式变量：

async mounted() {
  this.skuList = await this.getData();
}

3. 修改模板代码，遍历响应式变量skuList渲染列表：

<div v-for="item in skuList" :key="item.id">
  <my-favourite
    :name="item.name"
    :img-favorite="item.pictures"
    :color="item.color"
    :price="item.inclTax"
  />
</div>

内容的提问来源于stack exchange，提问作者francky