Need help binding an active class @click to a nested item in array of objects.
The array looks like this:
var arr =
[
{
"id": 10,
"name": "Main Name 1"
"parents": {
"id": 1,
"name": "Name1"
}
},
{
"id": 11,
"name": "Main Name 2"
"parents": [
{
"id": 2,
"name": "Name2"
},
{
"id": 3,
"name": "Name3"
}
]
}
]In Vue.js, looping through the array is done like this:
<v-col cols="2" v-for="main in arr" :key="main.id">
<b>Table {{main.name}}</b>
<v-card
class="ma-2 pb-6"
v-for="parent in main.parents" :key="parent.id"
@click="doSomeStuff"
>
<v-card-title>{{parent.name}}</v-card-title>
</v-card>
</v-col>Want to apply an active class on the clicked element within the nested v-for loop. Tried it here.
But currently, every first element in the array receives that class.
How can this be adjusted?