The v-list-group does not automatically expand sub-groups based on the path specified in the group prop

Question

The v-list-group does not automatically expand sub-groups based on the path specified in the group prop

I have a navigation sidebar that includes nested v-list-groups. Based on the documentation, the "group" prop of v-list-group should expand based on the route namespace.

To see more information, visit: https://vuetifyjs.com/en/components/lists/

While this functionality works well with the top-level v-list-group, it opens up when the page is reloaded and the route matches the "group" prop.

However, this feature does not work for the sub-group v-list-groups. Upon reloading the page, I notice the subgroup closing, indicating that the group prop is working but something is causing it to close immediately after.

The code can be a bit complex, especially with variable naming. It involves rendering a list of navigation items where items without a subgroup defined appear as regular items, while those with a subgroup render as subgroups. This structure goes two levels deep.

This approach allows me to define the entire navigation bar in a single JSON file and import it into my project.

<template>
    <v-list dense nav>
        <template v-for="(sidebarItem, sidebarIndex) in sidebarItems">
            <v-list-item
                v-if="arrayIsEmptyOrUndefined(sidebarItem.subGroup)"
                :key="sidebarIndex"
                :to="sidebarItem.linkTo"
                nuxt
            >
                <v-list-item-action>
                    <v-icon>{{ sidebarItem.icon }}</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                    <v-list-item-title v-text="sidebarItem.title" />
                </v-list-item-content>
            </v-list-item>

            <v-list-group
                v-if="
                    (!arrayIsEmptyOrUndefined(sidebarItem.subGroup) &&
                    typeof sidebarItem.subGroup !== 'undefined')
                "
                :key="sidebarIndex"
                :prepend-icon="sidebarItem.icon"
                :group="sidebarItem.linkTo"
            >
                <template v-slot:activator>
                    <v-list-item-content>
                        <v-list-item-title>{{ sidebarItem.title }}</v-list-item-title>
                    </v-list-item-content>
                </template>

                <v-list-item
                    v-if="arrayIsEmptyOrUndefined(sidebarItem.subGroup)"
                    :key="subGroupIndex"
                    :to="sidebarItem.linkTo"
                    nuxt
                >
                    <v-list-item-action>
                        <v-icon>{{ sidebarItem.icon }}</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title v-text="sidebarItem.title" />
                    </v-list-item-content>
                </v-list-item>

                <template v-for="(subGroupItem, subGroupIndex) in sidebarItem.subGroup">
                    <v-list-item
                        v-if="arrayIsEmptyOrUndefined(subGroupItem.subGroup)"
                        :key="subGroupIndex"
                        :to="subGroupItem.linkTo"
                        nuxt
                    >
                        <v-list-item-action>
                            <v-icon>{{ subGroupItem.icon }}</v-icon>
                        </v-list-item-action>
                        <v-list-item-content>
                            <v-list-item-title v-text="subGroupItem.title" />
                        </v-list-item-content>
                    </v-list-item>

                    <v-list-group
                        v-if="
                            (!arrayIsEmptyOrUndefined(subGroupItem.subGroup) &&
                            typeof subGroupItem.subGroup !== 'undefined')
                        "
                        :key="subGroupIndex"
                        sub-group
                        :group="subGroupItem.linkTo"
                    >
                        <template v-slot:activator>
                            <v-list-item-content>
                                <v-list-item-title>{{ subGroupItem.title }}</v-list-item-title>
                            </v-list-item-content>
                        </template>

                        <v-list-item
                            v-for="(subGroupSubGroupItem, subGroupSubGroupIndex) in subGroupItem.subGroup"
                            :key="subGroupSubGroupIndex"
                            :to="subGroupSubGroupItem.linkTo"
                            nuxt
                            exact
                        >
                            <v-list-item-content>
                                <v-list-item-title v-text="subGroupSubGroupItem.title" />
                            </v-list-item-content>
                            <v-list-item-action>
                                <v-icon>{{ subGroupSubGroupItem.icon }}</v-icon>
                            </v-list-item-action>
                        </v-list-item>
                    </v-list-group>
                </template>
            </v-list-group>
        </template>
    </v-list>
</template>

If both the group and subgroup match the route namespace, only the group expands. The Vuetify documentation website provides a functional example of this behavior. If you navigate to a sub-group and refresh the page, the sub-group remains open.

https://i.sstatic.net/1lNPd.png

javascript vue.js vuetify.js

Answer 1

Answer №1

After what seemed like a simple task, I found myself struggling more than expected. To overcome this, I delved into the source code of the Vuetify docs site, focusing on key components like the main navigation drawer, the base-group component, the base-subgroup component, and the base-item component. These components were originally separated for easier management but are combined below:

<template>
  <v-navigation-drawer permanent>
    <v-toolbar color="indigo" dark>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>  
      <v-toolbar-title>Main Menu</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
    <v-list
      dense
      expand
      nav
    >
      <!-- ENTIRE list is wrapped in a template -->
      <template v-for="item in $router.options.routes">
        <!-- use v-if to determine if 2nd level nesting is needed -->
        <!-- if it's a menu item with no children -->
        <v-list-item
          v-if="!item.children"
          color="indigo"
          :key="item.name`"
          :to="item.path"
        >
          <v-list-item-icon>
            <v-icon>{{ `mdi-${item.meta.icon}` }}</v-icon>
          </v-list-item-icon>
          <v-list-item-title>{{ item.name }}</v-list-item-title>
        </v-list-item>
        <!-- else if it has children -->
        <v-list-group
          v-else
          :group="item.path"
          color="indigo"
        >
          <!-- this template is for the title of top-level items with children -->
          <template #activator>
            <v-list-item-content>
              <v-list-item-title>
                <v-icon>{{ `mdi-${item.meta.icon}` }}</v-icon>
                {{ item.name }}
              </v-list-item-title>
            </v-list-item-content>
          </template>
         [....] (The rest of the code has been abbreviated)
        </v-list-group>
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

I realized that the menu was dynamically generated from Vue Router routes. Here is an example of what the router setup looks like:

const router = new VueRouter({
  routes: [
    {
      name: 'No Children (1 level)',
      path: '/no-children',
      meta: {
        icon: 'baby-carriage-off',
      },
    },
    {
      name: 'Attractions (2 levels)',
      path: '/attractions',
      meta: {
        icon: 'airballoon',
      },
      children: [
        { ... }
     ]
    },
    {
      name: 'Restaurants (3 levels)',
      path: '/restaurants',
      meta: {
        icon: 'silverware-fork-knife',
      },
      children: [
       { ... }
     ]
    },
  ]
})

Check out the complete working example on CodePen. It starts at the route

/restaurants/japanese/late-night-ramen

, and clicking any endpoint logs the application's routing path in the console. I hope this explanation clarifies things!

Answer 2

After what seemed like a simple task, I found myself struggling more than expected. To overcome this, I delved into the source code of the Vuetify docs site, focusing on key components like the main navigation drawer, the base-group component, the base-subgroup component, and the base-item component. These components were originally separated for easier management but are combined below:

<template>
  <v-navigation-drawer permanent>
    <v-toolbar color="indigo" dark>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>  
      <v-toolbar-title>Main Menu</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
    <v-list
      dense
      expand
      nav
    >
      <!-- ENTIRE list is wrapped in a template -->
      <template v-for="item in $router.options.routes">
        <!-- use v-if to determine if 2nd level nesting is needed -->
        <!-- if it's a menu item with no children -->
        <v-list-item
          v-if="!item.children"
          color="indigo"
          :key="item.name`"
          :to="item.path"
        >
          <v-list-item-icon>
            <v-icon>{{ `mdi-${item.meta.icon}` }}</v-icon>
          </v-list-item-icon>
          <v-list-item-title>{{ item.name }}</v-list-item-title>
        </v-list-item>
        <!-- else if it has children -->
        <v-list-group
          v-else
          :group="item.path"
          color="indigo"
        >
          <!-- this template is for the title of top-level items with children -->
          <template #activator>
            <v-list-item-content>
              <v-list-item-title>
                <v-icon>{{ `mdi-${item.meta.icon}` }}</v-icon>
                {{ item.name }}
              </v-list-item-title>
            </v-list-item-content>
          </template>
         [....] (The rest of the code has been abbreviated)
        </v-list-group>
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

I realized that the menu was dynamically generated from Vue Router routes. Here is an example of what the router setup looks like:

const router = new VueRouter({
  routes: [
    {
      name: 'No Children (1 level)',
      path: '/no-children',
      meta: {
        icon: 'baby-carriage-off',
      },
    },
    {
      name: 'Attractions (2 levels)',
      path: '/attractions',
      meta: {
        icon: 'airballoon',
      },
      children: [
        { ... }
     ]
    },
    {
      name: 'Restaurants (3 levels)',
      path: '/restaurants',
      meta: {
        icon: 'silverware-fork-knife',
      },
      children: [
       { ... }
     ]
    },
  ]
})

Check out the complete working example on CodePen. It starts at the route

/restaurants/japanese/late-night-ramen

, and clicking any endpoint logs the application's routing path in the console. I hope this explanation clarifies things!

Answer 3

Answer №2

One method to achieve this is by utilizing 'to' as a routing solution, which will automatically recognize the current route.

      <v-list v-model:opened="open">
      <template v-for="(menu, j) in mainMenu">
        <v-list-group :value="menu.title" > ;
          <template v-slot:activator="{ props }"> ;
            <v-list-item
              v-bind="props"
              :key="menu.title + j"
              :value="menu.title + j"
            > ;
              <v-icon>{{ menu.icon }}</v-icon>
              {{ $t(menu.title) }}
            </v-list-item> ;
          </template> ;

          <v-list-item
             dense
             v-for="(item, i) in menu.subMenu"
             :key="item.title + j + i"
             :value="item.title + j + i"
             :title= & quot; item.title">
             :to= & quot; item.path"& >
          </v-list-item> ;
        </v-list-group> ;
       </template> ;
    </v-list> ;

Answer 4

One method to achieve this is by utilizing 'to' as a routing solution, which will automatically recognize the current route.

      <v-list v-model:opened="open">
      <template v-for="(menu, j) in mainMenu">
        <v-list-group :value="menu.title" > ;
          <template v-slot:activator="{ props }"> ;
            <v-list-item
              v-bind="props"
              :key="menu.title + j"
              :value="menu.title + j"
            > ;
              <v-icon>{{ menu.icon }}</v-icon>
              {{ $t(menu.title) }}
            </v-list-item> ;
          </template> ;

          <v-list-item
             dense
             v-for="(item, i) in menu.subMenu"
             :key="item.title + j + i"
             :value="item.title + j + i"
             :title= & quot; item.title">
             :to= & quot; item.path"& >
          </v-list-item> ;
        </v-list-group> ;
       </template> ;
    </v-list> ;

The v-list-group does not automatically expand sub-groups based on the path specified in the group prop

Answer №1

Answer №2

Similar questions

I encountered login issues when trying to access dist/index.html in my Angular 8 application, but I found a workaround by utilizing the proxy.conf.json file, which

Input form with multiple fields. Automatically display or hide labels based on whether each field is populated or empty

Is it possible to expand the CORS permissions to the routers directly from the app?

What could be causing my Vue component to not refresh?

Ways to determine the position of elements when they are centered using `margin:auto`

Retrieve the $root instance in Vuex actions

The Runtime Error encountered in NEXTJS: TypeError - Unable to iterate over 'games' as it is not

Building a remote shell using Node.js with the ability to interpret control sequences

Adding a MTL texture to an OBJ in your three.js project is a simple process that can enhance

Tips for submitting a checkbox value even when it is disabled

"When using FireFox, you can easily create a hyperlink that scrolls to a specific section of a webpage,

Learn how to manipulate the DOM by dynamically creating elements and aligning them on the same line

Loading Data into Array - Angular/Ionic

show a fresh new page using react router

When executing npm run server, an error is generated saying: "sh: 1: vue-cli-service: not

Having difficulty accessing the ::after element on Firefox when attempting to click

Utilizing AngularJS and RequireJS for intricate routing within web applications

The webpage is missing a rendered React component even though it should be displayed

Steps to indicate a cucumber test as incomplete using a callback function in a node environment

Reload the MEN stack webpage without the need to reload the entire page