Vue.js 获取多个嵌套项的计数

我正在显示一个Vuetify datatable，需要根据下面示例JSON中嵌套数据的计数跨越一些行。行范围值应为InvoiceSection和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,
    }
]

我可以获得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,
    }
]

我的代码片段（尝试先显示要调试的计数）：

{{props.item.vendorCode}{{props.item.invoiceSections.length+1}-{{props.item.invoiceSections.invoiceItems.length}
{{props.item.vendorName}
{{props.item.poNumber}
{{props.item.invoiceDate}时刻（“M/D/YY”）}
{{props.item.invoiceAmount | currency}}
mdi检查
mdi检查
{{section.sectionDescription}}
{{section.repairReason}
$ 999
评论
{{item.partNumber}
{{item.partDescription}}
{{item.qtyReceived}
{{item.each | currency}}
N
{{item.secTotal | currency}}
评论
评论
接近

invoiceSections[0]。invoiceItems

您需要指定invoiceSections的索引，因为它是一个list@depperm那很简单！这很有效。现在，如果我能将这个逻辑从模板中移出，那就更好了<代码>：rowspan=“props.item.invoiceSections.length+props.item.invoiceSections[0]。invoiceItems.length+1”您可以将其移动到方法