我有一个列表,它遍历一个对象数组,并生成依赖于当前对象的列表项。
必须使用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>
如何获得所需的行为?
答案 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>