获取多个嵌套项目的计数

Question

我正在显示Vuetify数据表，并且需要根据以下示例JSON中嵌套数据的数量来跨越一些行。 rowpan值应为invoiceSections和invoiceItems的计数。

我可以获取invoiceSections的计数/长度，但是在invoiceItems的计数/长度方面遇到了麻烦。

[{
        "vendorCode": "LOTMWI",
        "vendorName": "LOVES TIRE CARE",
        "orderId": "944803",
        "invoiceSections": [{
            "sectionDescription": "Lamps -  Tail, Stop, Turn & License, Rear",
            "repairReason": "INSPECTION",
            "invoiceItems": [{
                    "partNumber": "",
                    "partDescription": "REPAIR LABOR",
                    "qtyReceived": 0,
                },
                {
                    "partNumber": "TL44032R",
                    "partDescription": "44032R S/T/T SUPER MODEL 44LED R",
                    "qtyReceived": 2,
                },
                {
                    "partNumber": "IMBRASS02",
                    "partDescription": "BRASS FITTINGS 02",
                    "qtyReceived": 1,
                },
            ],
            "id": 1,
        }],
        "id": 171,
    }
]

摘录了我的代码（试图显示要先调试的计数）：

<template v-slot:item="props">
          <!-- <tbody> -->
          <tr>
            <td
              :rowspan="rowspan"
              valign="top"
              class="pt-3 text-left font-weight-medium"
            >{{ props.item.vendorCode }} {{ props.item.invoiceSections.length + 1}} - {{  props.item.invoiceSections.invoiceItems.length }}</td>
            <td
              :rowspan="rowspan"
              valign="top"
              class="pt-3 text-left font-weight-medium"
            >{{ props.item.vendorName }}</td>
            <td
              :rowspan="rowspan"
              valign="top"
              class="pt-3 text-left font-weight-medium"
            >{{ props.item.poNumber }}</td>
            <td :rowspan="rowspan" valign="top" class="pt-3 text-left font-weight-medium">
              <a
                href="#"
                data-tooltip="Click to view invoice"
                data-tooltip-position="bottom"
                target="_blank"
              >{{ props.item.invoiceNumber }}</a>
            </td>
            <td
              :rowspan="rowspan"
              valign="top"
              class="pt-3 text-left font-weight-medium"
            >{{ props.item.invoiceDate | moment("M/D/YY") }}</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td
              valign="top"
              class="pt-3 text-right font-weight-medium nowrap"
            >{{ props.item.invoiceAmount | currency }}</td>
            <td :rowspan="rowspan" valign="top" class="pt-3 text-center">
              <div v-if="props.item.approvalDate">
                <v-icon color="green">mdi-check</v-icon>
              </div>
              <div v-else>
                <v-btn @click="markApproved(props.item)" class="mx-2" fab small>
                  <v-icon color="grey lighten-2">mdi-check</v-icon>
                </v-btn>
              </div>
            </td>
          </tr>

          <!-- SECTIONS -->
          <template v-for="section in props.item.invoiceSections">
            <tr class="darkTableRow" :key="section.id">
              <td class="text-left" colspan="2">{{ section.sectionDescription }}</td>
              <td class="text-left" colspan="3">{{ section.repairReason }}</td>
              <td>$ 999</td>
              <td>
                <v-btn
                  outlined
                  small
                  color="primary"
                  dark
                  v-if="section.comments"
                  @click.stop="$set(dialogComments, section.id, true)"
                >Comments</v-btn>
              </td>
            </tr>
            <!-- ITEMS -->
            <tr v-for="item in section.invoiceItems" :key="item.id">
              <td class="text-left">{{ item.partNumber }}</td>
              <td class="text-left">{{ item.partDescription }}</td>
              <td class="text-right">{{ item.qtyReceived }}</td>
              <td
                class="text-right nowrap nopaddingRight"
                :class="item.comparison"
              >{{ item.each | currency }}</td>
              <td class="text-left nowrap nopaddingLeft" :class="item.comparison">
                <span
                  v-if="item.nationalAccount"
                  data-tooltip="National Account"
                  data-tooltip-position="right"
                >N</span>
              </td>
              <td class="text-right nowrap">{{ item.secTotal | currency }}</td>
              <td class="text-left">
                <v-btn
                  outlined
                  small
                  color="primary"
                  dark
                  v-if="item.comments"
                  @click.stop="$set(dialogComments, item.id, true)"
                >Comments</v-btn>
                <v-dialog
                  v-model="dialogComments[item.id]"
                  scrollable
                  lazy
                  max-width="600"
                  :key="item.id"
                >
                  <v-card>
                    <v-card-title class="headline grey lighten-2" primary-title>Comments</v-card-title>
                    <v-divider></v-divider>
                    <v-card-text v-html="item.comments" class="pt-4"></v-card-text>
                    <v-divider></v-divider>
                    <v-card-actions>
                      <v-spacer></v-spacer>
                      <v-btn
                        color="green darken-1"
                        outlined
                        @click.stop="$set(dialogComments, item.id, false)"
                      >Close</v-btn>
                    </v-card-actions>
                  </v-card>
                </v-dialog>
              </td>
            </tr>
          </template>

          <tr>
            <td colspan="13" class="divider">&nbsp;</td>
          </tr>
          <!-- </tbody> -->
        </template>