我正在尝试在对象数组中进行循环。 这是我的代码
private async rightsOverview() {
let item: any[] = [];
const prod = await fetchFromApi<ProductionBaseType>(`/productions/${id}/right-contracts`)
const rightOverviewuser = await Promise.all(prod.map(async right => {
const rightData = await fetchFromApi<ProductionBaseType>(`/productions/${id}/right-contracts/${right.id}/rights`)
item.push({
id: right.id,
rightData: rightData,
prod: right
});
return item
}))
console.log(item)
this.productions = rightOverviewuser
}
我在此函数中有两个API调用,并且在一个对象中组合了值,直到这里工作正常为止。现在我有一个问题,如何在前端打印值。
我在控制台上如何查看正在打印的值
控制台:
[{
id: "",
prod: {object},
rightData: {object}
}]
然后我试图像这样循环遍历,但并没有返回我需要的值。
<right-overview-list-item
v-for="production in productions"
:key="production.id"
:production="production"
/>
<div class="overview-list-item">
{{ production.prod.toCompanyType.name }}
</div>
<div class="overview-list-item">
{{ production.rightData.endDate }}
</div>
我希望你明白我想要的。如果不清楚,请随时询问,我将尽我所能解释。
答案 0 :(得分:1)
假设没有嵌套属性可以返回为null / undefined,则您遇到的问题是for循环。 v-for
元素的作用域仅存在于定义元素/组件的内部或内部,因此production
中的每个productions
如下所示:
<right-overview-list-item
v-for="production in productions"
:key="production.id"
:production="production"
/>
仅存在于此right-overview-list-item
组件上,而不存在于此后定义的两个<div>
元素上。您需要将其更改为以下内容:
<template v-for="production in productions">
<right-overview-list-item :production="production"/>
<div class="overview-list-item">
{{ production.prod.toCompanyType.name }}
</div>
<div class="overview-list-item">
{{ production.rightData.endDate }}
</div>
</template>