CODEWITHSUNDEEP
vuetify.jsvuejs3vuetifyjs3
Cameron
Cameron

Reputation: 2575

Can't set the open state when using multiple v-list-groups

I'm trying to close currently opened v-list-group components when a new one is opened.

Currently the v-list-groups open up multiple at a time.

<v-list class="pa-4" color="transparent" @click:select="customizer.handleSelect">
        <!---Menu Loop -->
        <template v-for="(item, i) in sidebarMenu">
          <!---Item Sub Header -->
          <v-list-subheader v-if="item.header">
            {{ item.header }}
          </v-list-subheader>

          <!---If Has Child -->
          <v-list-group v-else-if="item.children" class="">
            
            <!--- Inject Activator Template -->
            <template #activator="{ props }">
              <v-list-item 
                v-bind="props" 
                :value="item.title" 
                rounded="lg" 
                class="mb-1">
                <!--- Icon -->
                <v-list-item-avatar start class="v-list-item-avatar--start">
                  <vue-feather :type="item.icon" class="feather-sm"></vue-feather>
                </v-list-item-avatar>
                
                <!--- Title -->
                <v-list-item-title v-text="item.title" class="mr-auto"></v-list-item-title>
                
                <!-- Inject Append Template -->
                <template #append>
                  <v-list-item-avatar end class="v-list-item-avatar--end">
                    <vue-feather type="chevron-down" class="feather-sm"></vue-feather>
                  </v-list-item-avatar>
                </template>
              </v-list-item>
            </template>

            <!--- v-list-item -->
            <v-list-item
              v-for="(subitem, i) in item.children"
              :key="i"
              :value="subitem.to"
              :to="subitem.to"
              rounded="lg"
              class="first-level-item mb-1">
              <v-list-item-avatar start class="v-list-item-avatar--start">
                <vue-feather type="disc" class="feather-sm"></vue-feather>
              </v-list-item-avatar>
              <v-list-item-title v-text="subitem.title"></v-list-item-title>
            </v-list-item>
            <!-- /v-list-item -->
            
          </v-list-group>
</v-list>

There is a value prop but the documentation is not clear on how I can manage the open state of the sidebar.

Upvotes: 0

Views: 1228

Answers (1)

Robert Cox
Robert Cox

Reputation: 36

Vuetify 3 defaults to allowing each group to be open. To change the default behavior, set the open-strategy prop to "single" on the parent v-list.

<v-list class="pa-4" open-strategy="single">

Upvotes: 2

Related Questions