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

【问题标题】：For Loop in VueJS with TypeScript in object ArrayVueJS中的For循环与对象数组中的TypeScript
【发布时间】：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 的值吗？

标签： javascript html typescript vue.js vuejs2

【解决方案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>

【讨论】：