javascript - VueJS 中的 For 循环与对象数组中的 TypeScript

Question

我正在尝试在对象数组中执行 for 循环。这是我的代码

 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>

我希望你明白我想要什么。如果问题不清楚，请随时提问，我会尽力解释。

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