I hope I grasped the essence of your question correctly as it seems to require further clarification. You should establish a connection between payment data and ledgerDetails objects by adding a unique key, such as paymentID, to the payment object. Additionally, include an extra attribute in the ledgerDetails object that references the payment's ID.
Example of ledgerDetails object:
{
paymentId:500,
otherAttribute...
}
Each payment object should have a distinct ID like so:
Example of payment object:
{
paymentId:500
}
Furthermore, you need a method to retrieve payment information based on the object data or ID from the store. This can be achieved through the findPaymentById method:
findPaymentById(paymentId) {
return paymentList.find(i => i === paymentId)
}
Once these steps are in place, you can access the payment details from ledgerDetails using the paymentId retrieved from the object. Display the details using another method.
When utilizing v-for, you can omit the index since it returns the complete object list for direct access without indexing:
<div v-for="ledgerItem from ledgerDetails">
payment details :
{{ findPaymentById(ledgerItem[0].paymentId) }}
</div>
Note that in this example, I used zero-based indexing (ledgerItem[0]) because ledgerItem is an array of objects within ledgerDetails.
If my interpretation is incorrect, please let me know so I can offer additional assistance.