[Vuejs]-V-list close group when list-item is clicked

3👍

You can just add v-model into v-list-group component and assign it to some variable. Changing this variable will lead to expand / collapse actions.

<v-list-group v-model="groupOpened">
  <template v-slot:activator>
    <v-list-item-title>Title</v-list-item-title>
  </template>
  <v-list-item
    v-for="item in mobAdminItems"
    ...
    @click="groupOpened = false"
  >
    <v-list-item-content>
      <v-list-item-title v-text="item.title"></v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list-group>
...
data () {
  return {
    ...
    groupOpened: false,
  }
}

Test this at CodePen.

Leave a comment