I need help with synchronizing two lists. The first list is displayed in a carousel format, and the second list contains details corresponding to each card in the carousel. I have successfully implemented logic to track the current index of the displayed card in the cardIndexShow data object as users swipe through the carousel.
Now, my goal is to only display the detail from the second list that matches the index of the card currently being shown in the carousel. For example, if the carousel is showing card at index 0, I want to display the detail at index 0 from the second list. This synchronization should update dynamically as users interact with the carousel.
Here is my code snippet for looping through the second list:
<div v-for="(cardTransactions, index) in card_transactions_filtered" v-bind:key="index" ">
<p>{{ cardTransactions.detail }}</p>
</div>
In my computed property, I am filtering the main list (card_transactions):
computed:{
card_transactions_filtered(){
return this.card_transactions.filter...
// struggling to proceed
}
},
The ultimate objective here is to display details from this.card_transactions based on the index values present in this.cardIndexShow.