Vuetify - Set active class for submenu item when selected

Viewed 3856

I have a Vue/Vuetify app that has a left nav menu, and it was originally created before my time with just a single level of items. I've had to add a second level of menu items, and they work fine to the extent that they expand when the parent item is clicked, and when clicked they do what they should. The thing I can't quite figure out is how to 1) highlight the selected submenu item and 2) remove the highlighting from the parent item when clicked.

Here is the markup for the element:

<template>
  <v-list dark class="ap-sidebar-applist">
    <v-list-group
      class="ap-sidebar-group"
      v-for="(item, i) in items"
      :key="i"
      :prepend-icon="item.icon"
      :value="item.visible"
      @click="onClick(item)"
    >
      <v-list-tile slot="activator">
        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
      </v-list-tile>
      <div v-if="item.children">
        <v-list-tile class="sub-list"
          v-for="(subMenu, j) in item.children"
          :key="j"
          @click="onClick(subMenu, true)"
          active-class="default-class sub-list"
        >
          <v-list-tile-action>
            <v-icon>{{ subMenu.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>{{ subMenu.title }}</v-list-tile-title>
        </v-list-tile>
      </div>
    </v-list-group>

<!--</v-list-group> -->
  </v-list>
</template>

And here is a full CodePen. One note for the CodePen is that the setCurrentWorkspace called from onClick() is a Vuex action that is used higher up the component tree to highlight menu tabs elsewhere in the app.

What I'm seeing is that the sub-class class (defined in active-class for the child items) is applied to both of the submenu items when the parent Templates item is selected, and the v-list__group__header--active class remains on the parent item as well.

Do I need to manually remove the active class from the parent Templates item, and also remove it manually from the other submenu item? Or is there an easier way to do this with the current Vuetify API?

0 Answers
Related