如何使用Vue js(嵌套数组)获得总运行平衡

Question

我想得到运行平衡Amort-AmountApplied这是我想要实现的输出

Line  Amort     Total Payment     Running Balance
1    30250         10000             20250.00
30250         20250             0.00
2    30250         30250             0.00

在我的vue

<table>
//...
<tbody v-for="(fetch,count,idx) in soaData">
<tr>
// code
</tr>
<template v-for="(subFetch,count) in fetch.subPayments" >
<tr>
<td class="text-right">{{subFetch.AmountApplied | formatNum}}</td>
<td class="text-right">{{getRunningBal(fetch.subPayments,fetch.amortId)}}</td>
</tr>
</template>
</tbody>
</table>

在我的方法

getRunningBal(subPayments,amortId){
let subpayCount = Object.values(this.soaData[amortId].subPayments).length
let data = Object.values(this.soaData[amortId].subPayments)
var total = 0;
for(let i=0; i < subpayCount; i++){              
return total += data[i].AmountApplied)
}

我的数据

{
"267": {
"Ndays": 9,
"DueDate": "2023-02-15",
"Amort": 30250,
"CheckNumber": "12341431",
"DatePaid": "2022-10-07",
"CheckStatus": "INVALID",
"TotalRCF": null,
"TotalDPF": null,
"TotalHF": null,
"amortCode": "11-9",
"amortId": 267,
"paymentAppliedID": 77,
"DateDeposited": "2022-10-08",
"ReDepositDate": null,
"AmountApplied": 20250,
"TotalPayables": 30250,
"TotalPaymentsApplied": 30250,
"subPayments": {
"75": {
"AmountApplied": 10000,
"isCheck": 0,
"amortCode": "11-9",
"ReDepositDate": null,
"DateDeposited": null,
"DatePaid": "2022-10-07",
"CheckNumber": null,
"paymentAppliedID": 75,
"TotalPayables": 30250
},
"77": {
"AmountApplied": 20250,
"isCheck": 1,
"amortCode": "11-9",
"ReDepositDate": null,
"DateDeposited": "2022-10-08",
"DatePaid": "2022-10-07",
"CheckNumber": "12341431",
"paymentAppliedID": 77,
"TotalPayables": 30250
}
}
},
"270": {
"Ndays": 12,
"DueDate": "2023-03-30",
"Amort": 30250,
"CheckNumber": null,
"DatePaid": "2022-10-07",
"CheckStatus": "CASHREP",
"TotalRCF": null,
"TotalDPF": null,
"TotalHF": null,
"amortCode": "",
"amortId": 270,
"paymentAppliedID": 79,
"DateDeposited": null,
"ReDepositDate": null,
"AmountApplied": 30250,
"TotalPayables": 30250,
"TotalPaymentsApplied": 30250,
"subPayments": {
"79": {
"AmountApplied": 30250,
"isCheck": 0,
"amortCode": "11-12",
"ReDepositDate": null,
"DateDeposited": null,
"DatePaid": "2022-10-07",
"CheckNumber": null,
"paymentAppliedID": 79,
"TotalPayables": 30250
}
}
}
}

Answer 1

由于可能嵌套的数组索引使用ID作为索引，所以我像这样制作v-for="(subFetch,key,count) in fetch.subPayments"，以0 开始获取索引

<table>
//...
<tbody v-for="(fetch,count,idx) in soaData">
<tr>
// code
</tr>
<template v-for="(subFetch,key,count) in fetch.subPayments" >
<tr>
<td class="text-right">{{subFetch.AmountApplied | formatNum}}</td>
<td class="text-right">{{getRunningBal(fetch.subPayments,fetch.amortId)}}</td>
</tr>
</template>
</tbody>
</table>

我得到subPayments的索引，以获得每行的总和，它起的作用

getRunningBal(subPayments,amortId, count){    
let subpayCount = Object.values(this.soaData[amortId].subPayments).length
let data = Object.values(this.soaData[amortId].subPayments)
var total = 0;
for(let i=0; i <= count; i++){              
total += data[i].AmountApplied
}
return total       
},