I have an array that looks something like this
data: Array(3)
0:
data: Object
account_id: (...)
address_1: (...)
address_2: (...)
amount: 10.00
id: 1234
...
1:
data: Object
account_id: (...)
address_1: (...)
address_2: (...)
amount: 20.00
id: 1274
Currently, I am trying to fetch and display specific item data in a modal using axios call when the particular item is clicked.
<div v-for="card in card_data" v-bind:key="card.data.id">
...
<a class="text-white shadow" @click="cardClicked(card.data.id)"> Card details</a>
</div>
export default {
data() {
return {
},
name_on_card:'',
card_pan:'',
expiration:'',
cvv:'',
request_data: [],
}
},
cardClicked: function(id) {
axios.get('api/get_vcard').then(response => {
let i = this.request_data.map(item => item.data.id).indexOf(id);
this.name_on_card = response.data[i].name_on_card;
this.card_pan = response.data[i].data.card_pan;
this.expiration= response.data[i].data.expiration;
}).catch(error => console.log(error));
},
}
Unfortunately, clicking the button does not retrieve the expected data as intended.
However, interestingly, the code works for one of the entries and successfully retrieves the data.
this.name_on_card = response.data[i].name_on_card;
How can I correctly map and retrieve data based on a clicked item's index?