I have an array of 32 datas named ledgerDetails. I display the details of the data in vue v-for loop. But, within the loop I want to display the details of invoiceDescriptions consists of 23 datas and paymentDescriptions consists of 12 datas with some conditions. So, how to display it.
My Code :
<tr v-for="(ledger, index) in ledgerDetails" :key="index">
<td>
{{ formatDate(ledgerDetails[index][0]["create_datetime"]) }}
</td>
<td>
<span
v-if="
isNaN(
ledgerDetails[index][0]['public_number'] &&
userDetails['User']['account_id'] ==
ledgerDetails[index][0]['public_number']
)
"
>
{{ paymentDescriptions[index] }}
</span>
<span
v-if="(
ledgerDetails[index][0]['public_number'] == 0 &&
ledgerDetails[index][0]['type'] == 'creditNote')
"
>
Refund
</span>
<span v-else>
<span v-if="invoiceDescriptions !== 'undefined'">
{{ getInvoiceDesc() }}
</span>
<span v-else> </span>
</span>
</td>
<td>
<span
v-if="
isNaN(
ledgerDetails[index][0]['public_number'] &&
userDetails['User']['account_id'] ==
ledgerDetails[index][0]['public_number']
)
"
>
Payment
</span>
<span
v-if="
ledgerDetails[index][0]['public_number'] == 0 &&
ledgerDetails[index][0]['type'] == 'creditNote'
"
>
Credit Note
</span>
<span v-else> Invoice </span>
</td>
<td></td>
<td>
<span
v-if="
isNaN(
ledgerDetails[index][0]['public_number'] &&
userDetails['User']['account_id'] ==
ledgerDetails[index][0]['public_number']
)
"
>
<span v-if="!ledgerDetails[index][0]['reference_num1']">
{{ ledgerDetails[index][0]["reference_num1"] }}
</span>
<span v-else>
{{ ledgerDetails[index][0]["reference_num"] }}
</span>
</span>
<span
v-if="
ledgerDetails[index][0]['public_number'] == 0 &&
ledgerDetails[index][0]['type'] == 'creditNote'
"
>
{{ ledgerDetails[index][0]["reference_num1"] }}
</span>
<span v-else>
{{ ledgerDetails[index][0]["reference_num1"] }}
</span>
</td>
<td>
<span
v-if="
isNaN(
ledgerDetails[index][0]['public_number'] &&
userDetails['User']['account_id'] ==
ledgerDetails[index][0]['public_number']
)
"
>
</span>
<span
v-if="
ledgerDetails[index][0]['public_number'] == 0 &&
ledgerDetails[index][0]['type'] == 'creditNote'
"
>
</span>
<span v-else>
<!-- {{ floatConversion(ledger.total) }} -->
</span>
</td>
<td>
<span
v-if="
isNaN(
ledgerDetails[index][0]['public_number'] &&
userDetails['User']['account_id'] ==
ledgerDetails[index][0]['public_number']
)
"
>
<!-- {{ floatConversion(ledger.total) }} -->
</span>
<span
v-if="
ledgerDetails[index][0]['public_number'] == 0 &&
ledgerDetails[index][0]['type'] == 'creditNote'
"
>
<!-- {{ floatConversion(ledger.total) }} -->
</span>
<span v-else> </span>
</td>
<td></td>
</tr>`<tr v-for="(ledger, index) in ledgerDetails" :key="index">
<td>
{{ formatDate(ledgerDetails[index][0]["create_datetime"]) }}
</td>
<td>
<span
v-if="
isNaN(
ledgerDetails[index][0]['public_number'] &&
userDetails['User']['account_id'] ==
ledgerDetails[index][0]['public_number']
)
"
>
{{ paymentDescriptions[index] }}
</span>
<span
v-if="(
ledgerDetails[index][0]['public_number'] == 0 &&
ledgerDetails[index][0]['type'] == 'creditNote')
"
>
Refund
</span>
<span v-else>
<span v-if="invoiceDescriptions !== 'undefined'">
{{ getInvoiceDesc() }}
</span>
<span v-else> </span>
</span>
</td>
</tr>
Here, how to display the data of invoiceDescrptions and paymentDescriptions details within the ledgerDetails for loop.
Data :
paymentDescriptions: [{PaymentInfoCheque: {description: "Cash"}}, {PaymentInfoCheque: {description: "Cash"}},…]
0: {PaymentInfoCheque: {description: "Cash"}}
PaymentInfoCheque: {description: "Cash"}
description: "Cash"
1: {PaymentInfoCheque: {description: "Cash"}}
2: {PaymentInfoCheque: {description: "Cash"}}
3: {PaymentInfoCheque: {description: "Cash"}}
4: {PaymentInfoCheque: {description: "Cash"}}
5: {PaymentInfoCheque: {description: "Cash"}}
6: {PaymentInfoCheque: {description: "Cash"}}
7: {PaymentInfoCheque: {description: "Cash"}}
8: {PaymentInfoCheque: {description: "Cash"}}
9: {PaymentInfoCheque: {description: "Cash"}}
10: {PaymentInfoCheque: {description: "Cash"}}
11: {PaymentInfoCheque: {description: "Cash"}}
ledgerDetails: [[,…], [,…], [{type: "invoice", create_datetime: "2020-10-14 14:46:28", total: "100.82417582418",…}],… ] 0: [,…] 0: {type: "invoice", create_datetime: "2020-09-03 17:15:13", total: "100", public_number: "4", id: "4",...} 创建日期时间:“2020-09-03 17:15:13” 编号:“4” 公众号:“4” 参考编号:“4” 总计:“100” 类型:“发票”
invoiceDescriptions: [[{description: "test"}], [{description: "test Period from 25 Sep 2020 to 29 Sep 2020,test"}],...] 0:[{描述:“测试”}] 0:{描述:“测试”} 描述:“测试”