CODEWITHSUNDEEP
vue.jsvuetify.jsvue-router
Sunfile
Sunfile

Reputation: 125

v-list close group when list-item is clicked

I've this v-navigation drawer in my project. It contains both v-list-items and a v-list-group. When clicking an v-list-item, and the v-list-group is expanded, I want the group to be collapsed. How can this be done?

<v-app id="t">
  <v-navigation-drawer dark v-model="sidebar" app>
    <v-list>
      <v-list-item router-link to='/Test'>
        <v-list-item-title>Test</v-list-item-title>
      </v-list-item>
      <v-list-item router-link to='/Test2'>
        <v-list-item-title>Test2</v-list-item-title>
      </v-list-item>
      <v-list-group :value="true">
        <template v-slot:activator>
          <v-list-item-title>Title</v-list-item-title>
        </template>
        <v-list-item
          v-for="item in mobAdminItems"
          :key="item.title"
          :to="item.linkTo"
        >
          <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>
      <v-list-item router-link to='/Test3'>
        <v-list-item-title>Test3</v-list-item-title>
      </v-list-item>
      <v-list-item router-link to='/Test4'>
        <v-list-item-title>Test4</v-list-item-title>
      </v-list-item>

    </v-list>
  </v-navigation-drawer>
</v-app>

Upvotes: 0

Views: 5157

Answers (1)

Alexander Shkirkov
Alexander Shkirkov

Reputation: 3857

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.

Upvotes: 3

Related Questions