Uniquely identify button click for individual v-cards in vuejs

Question

I am using vuejs with vuetify 1.5 i am little bit stuck in my code the issue here is i have an array of objects and based on that multiple v-cards getting generated for all the values present in the array of objects.

In multiple cards i have a button expand so by default i want to show only 4 values and onclicking expand the rest of values will be shown in the cards and that expand button but the issue is all cards will have the same expand button so on clicking expand all cards are expanding and its values are shown but I want uniquely that means when i click expand only one cards value gets expanded rest of the cards will not expand.

here is my code :-

expandToggleHandler() {
  this.isExpand = !this.isExpand
},

<v-card
                            style="display: inline-block;"
                            class="cardView"
                            :key="rowIndex" 
                            @sort="onSort"
                            @click.native = "onRowClicked(row)"
                            >
                                    <v-layout wrap>
                                        <v-flex xs12 style="text-align: center; font-weight: bold;" :style="fixedColumn && clickableColumn || clickableColumn ? 'color: #ad00ff !important;' : 'color:  #3399bb'">
                                            {{row[Object.keys(row)[0]]}}
                                            <br />
                                        </v-flex>
                                    </v-layout>
                                    <v-layout wrap>
                                        <template v-if="!isExpand">
                                        <template v-for= "(key, idx) of cardViewColumn">
                                            <template v-for="(col, i) of key">
                                                <template v-if="idx <= 1">
                                                    <v-flex xs6 sm6 md6 style="text-align: center;">
                                                        <span style="font-weight: bold;">{{ col }}</span> <br /> {{row[col]}}
                                                    </v-flex> 
                                                </template>
                                            </template>
                                        </template>
                                        </template>
                                        <template v-if="isExpand">
                                            <template v-for= "(key, idx) of cardViewColumn">
                                                <template v-for="(col, i) of key">
                                                    <v-flex xs6 sm6 md6 style="text-align: center;">
                                                        <span style="font-weight: bold;">{{ col }}</span> <br /> {{row[col]}}
                                                    </v-flex> 
                                                </template>
                                            </template>
                                        </template>
                                    <md-button @click.stop="expandToggleHandler">{{ toggleExpandAndCollapse }}</md-button>
                                </v-layout>
                            </v-card>

and here is the image :-

in image you can see i have pressed expand button for single cards but event is getting fired for other cards too.

How can i resolve it any help with example would be appreciated.

Answer 1

You are using the single variable isExpand for multiple v-card components. To solve your problem I suggest to convert the variable to an array and use rowIndex as the index.

Your variable declaration should look like this:

isExpand: []

Your templates would use it like this.

<template v-if="!isExpand[rowIndex]">
</template>
<template v-else>
</template>

Please note that I replaced the second v-if with a v-else so the isExpand variable isn't checked twice.

The method would become:

expandToggleHandler(rowIndex) {
  this.isExpand[rowIndex] = !this.isExpand[rowIndex]
}

And you access it like this:

<md-button @click.stop="expandToggleHandler(rowIndex)">{{ isExpand[rowIndex] ? 'Collapse' : 'Expand'}}</md-button>

I didn't know what toggleExpandAndCollapse does but I guess it handles the button label.