在 Promise 解析后更新依赖于 Promise 的 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

像这样的东西应该对你有用。基本上，当 Promise 返回时，将异步响应存储在反应式数组中。由于它是反应性的，一旦每个承诺返回，承诺响应就会自动显示。

<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>