Для цикла в VueJS с TypeScript в объектном массиве

Question

Я пытаюсь сделать для цикла в массиве объектов.Это мой код

 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

При условии, что никакие вложенные свойства не могут быть возвращены как нулевые / неопределенные, ваша проблема связана с циклом for. Область действия для v-for элементов существует только внутри или внутри элемента / компонента, в котором он определен, поэтому каждый production in 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>