For Loop in VueJS with TypeScript in object Array

Question

I'm trying to do for loop in an object array. This is my code

 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
 }

I have two API calls in this function and combined values in one object, till here it is working fine. Now i have the issue how can print values on the front end.

I did the console how i can see the values are printing

Console:

    [{
        id: "",
        prod: {object},
        rightData: {object}
    }]

Then i tried to loop through like this but it's not returning the values how i need them.

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

I hope you understand what i want. If question is unclear please feel free to ask i will try to explain as much as i can.

Answer 1

Assuming no nested properties could be returned as null/undefined, your issue is with the for loop. The scope for v-for elements only exists on or within the element/component where it's defined, so each production in productions as shown here:

 <right-overview-list-item
             v-for="production in productions"
             :key="production.id"
             :production="production"
    />

will only exist on this right-overview-list-item component, and not the two <div> elements defined after. You need to change it to something like this:

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