I am currently working on a page that includes several cards, each with its own v-expand-transition. These cards are being generated through a v-for loop. The issue I'm facing is that when I click on one v-expand-transition, all of the transitions open simultaneously. I understand that this is because they are all connected to the same "show" event, but I am unsure how to separate them so each card has its own event. Below is the code snippet I am using:
<template>
<v-container>
<h1 class="font-weight-medium pa-6">All Labs</h1>
<v-row dense>
<v-col v-for="card in cards" :key="card.title" :cols="card.flex">
<v-card class="mx-auto" max-width="350">
<v-img class="white--text align-end" height="200px" :src="card.src" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)">
<v-card-title v-text="card.title"></v-card-title>
</v-img>
<v-card-subtitle class="pb=0" v-text="card.location"></v-card-subtitle>
<v-card-text class="text--primary">
<div v-text="card.hours"></div>
<div v-text="card.keycardInfo"></div>
</v-card-text>
<v-card-actions>
<v-btn color="blue" :href="card.directions" text target="_blank"gt;Directions</v-btn>
<v-btn color="blue" :to="card.page" text>Learn More</v-btn>
<v-spacer></v-spacer>
<v-btn icon @click="toggelShow(card.id)">
<v-icon>{{ getIconStatus(card.id) }}</v-icon>
</v-btn>
</v-card-actions>
<v-expand-transition>
<div v-show="isShown(card.id)">
<v-divider></v-divider>
<v-card-text v-text="card.bottomInfo"></v-card-text>
</div>
</v-expand-transition>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
and my script is as follows:
<script>
import App from '../App.vue'
export default {
components: { App },
name: 'Home',
data: () => ({
cardStatus: {},
cards: [],
}),
methods: {
toggleShow(id) {
this.$set(this.cardStatus, id, !this.cardStatus[id]);
},
isShown(id) {
return this.cardStatus[id];
},
getIconStatus(id) {
return this.isShown(id) ? 'mdi-chevron-up' : 'mdi-chevron-down';
}
}
}
</script>
I have kept the cards empty for now to prevent clutter on the page.