[Vuejs]-Collapse all list and expand only the selected list in vuetify

by

0👍

this can be simply done by using a v-model with every v-list-group. Something like this:

<v-list-group v-model="SubActive[header+subheader]" no-action sub-group v-for="(subheader, sIndex) in header.SubHeaderList" :key="sIndex" >
    <template v-slot:activator>
        <v-list-item-content v-on:click="subToggle(header,subheader)">
            <v-list-item-title>
                <span>{{subheader.Title}}</span>
            </v-list-item-title>
        </v-list-item-content>
    </template>

SubActive is a Vue data object with keys as header+subheader (to uniquely identify each subheader) and its initial value will be set to false for all subheaders.

The subToggle function will simply switch the rest of the values to false(to collapse them all except the one which is clicked):

subToggle(brand, category) {
             
    for (let i = 0; i < Object.keys(this.SubActive).length; i++) {
        if (brand + category != Object.keys(this.SubActive)[i]) {
            this.SubActive[Object.keys(this.SubActive)[i]] = false;
        }  
    }
},

Leave a comment