在承诺解决后，更新依赖于承诺的v-for列表项目

Question

我有一个列表，可以通过一系列对象迭代，并生成依赖当前对象的列表项目。

必须用对象作为参数进行计算，这返回承诺。问题是，当列表渲染时，它只能访问Promise对象(即将待定(，并且一旦解决后就不会更新。

<md-list id="orderList">
        <md-list-item v-for="order in orders" :key="order.id" @click="orderDialog(order)">
            {{ asyncFunction(order) }}
        </md-list-item>
 </md-list>

如何获得所需的行为？

Answer 1

类似的东西应该对您有用。基本上，当承诺返回时，将异步响应存储在反应性阵列中。由于它是反应性的，一旦每个承诺返回，承诺响应将自动显示。

<template>
    <md-list id="orderList">
        <md-list-item v-for="(order,i) in orders" :key="order.id" @click="orderDialog(order)">
            <template v-if="typeof asyncDataHolder[i] !== 'undefined'">
                {{asyncDataHolder[i]}}
            </template>
        </md-list-item>
    </md-list>
</template>
<script>
export default {
  data: {
    orders: [],
    asyncDataHolder: []
  },
  created() {
    // sample load orders
    sampleLoadOrdersData().then(response => {
      this.orders = response;
      this.loadAsyncData();
    });
  },
  methods: {
    loadAsyncData() {
      // async await version
      this.orders.map(async (order, i) => {
        const response = await asyncFunction(order);
        this.$set(this.asyncDataHolder, i, response);
      });
      // normal promise version
      this.orders.map((order, i) => {
        asyncFunction(order).then(response => {
          this.$set(this.asyncDataHolder, i, response);
        });
      });
    }
  }
};
</script>