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

Posted 2023-02-22

【中文标题】VueJS中的For循环与对象数组中的TypeScript

【英文标题】：For Loop in VueJS with TypeScript in object Array

【发布时间】：2019-11-11 23:30:08

【问题描述】：

我正在尝试在对象数组中执行 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>

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

【问题讨论】：

那么您在控制台中有prod 和rightData 的值吗？

【参考方案1】：

假设没有嵌套属性可以返回为 null/undefined，您的问题在于 for 循环。 v-for 元素的范围仅存在于定义它的元素/组件之上或之内，因此productions 中的每个production 如下所示：

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