[Vuejs]-How to display the array data of two description values within the vue v-for loop?

by

1👍

✅

I hope that I understood what are you talking about because your question need more clarification
You need to connect the data of the payment with the object of ledgerDetails
so consider you have to add unique key to the payment object like adding paymentID
and on the ledgerDetails you will have an extra attribute that refer to the id of the paymentId.

ledgerDetails obj

{
  paymentId:500,
  otherAttribute...
}

on the payment each object has unique id

payment Obj

{
paymentId:500
}

at the other hand you need a method to get the payment for the data of the object or from the store by id

findPaymentById

findPaymentById(paymentId) {
 return paymentList.find(i => i === paymentId)
}

now you are ready to get the payment of ledgerDetails by getting the paymentId from the object and search about it by the method and print the details with another.

by the way on the v-for you can ignore the index because it will return a full object of the list so you can access it directly without the index

<div v-for="ledgerItem from ledgerDetails">
payment details :
{{ findPaymentById(ledgerItem[0].paymentId) }}
</div>

and here i just used the zero indexing ledgerItem[0] because the ledgerItem from ledgerDetails it is an array of object.

if I didn’t understood well then please reply so if I can help you I will try

Leave a comment