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

时间:2018-03-30 13:06:38

标签: javascript vue.js

我有一个列表,它遍历一个对象数组,并生成依赖于当前对象的列表项。

必须使用object作为参数进行计算,该参数返回promise。问题是,当呈现列表时,它只能访问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>

如何获得所需的行为?

1 个答案:

答案 0 :(得分:2)

这样的事情对你有用。基本上,当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>