In my code, I tried to render series of card by v-for. each card has a button @click="expanded = !expanded" which make expand itself to show the rest of information. As a result of pressing one of the buttons, the others will be pressed too. How can I prevent this from happening?
my code:
<div v-for="item in userDataRefList" :key="item.postedBy">
<div class="row q-py-xs">
<q-card bordered flat class="bg-grey-1 full-width user-card">
<q-card-section>
<div class="row text-subtitle1">
<q-chip
square
class="text-grey-9"
id="takeValue"
>
{{ item.timestamp }}
</q-chip>
</div>
<div class="text-h6 q-my-xs job-font text-grey-9">
{{ item.taskTitle }}
</div>
<div class="text-body2 q-my-xs">{{ item.taskDetails }}</div>
</q-card-section>
<q-card-actions>
<q-space />
<!-- how to make following button unique -->
<q-btn
color="amber-10"
round
flat
icon="chat_bubble_outline"
@click="expanded = !expanded"
/>
</q-card-actions>
<q-slide-transition>
<div v-show="expanded">
<q-separator />
<q-card-section class="text-subitle2">
<div v-for="itm in item.shape" :key="itm">
<q-card flat class="bg-grey-3 q-ma-md">
<q-card-section>
{{ itm.cordinates }}
</q-card-section>
</q-card>
</div>
</q-card-section>
</div>
</q-slide-transition>
</q-card>
</div>
</div>
As a result of pressing one of the buttons, the others will be pressed too.
This is happening due to the updation of same variable for all the cards.
Instead of @click="expanded = !expanded" you have to assign expanded property in each object of item to make it separate for each card.
userDataRefList = [{
expanded: false,
...
}, {
expanded: false,
...
}, ...]
And in template, it should be @click="item.expanded = !item.expanded"