在VueJS中使用对象数组中的TypeScript进行For循环

时间:2019-07-01 09:48:52

标签: javascript html typescript vue.js vuejs2

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

 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>

我希望你明白我想要的。如果不清楚,请随时询问,我将尽我所能解释。

1 个答案:

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