Vuetify - установить активный класс для элемента подменю, когда выбран - PullRequest
Новая
       43

Vuetify - установить активный класс для элемента подменю, когда выбран

0 голосов
/ 17 июня 2019

У меня есть приложение Vue / Vuetify, у которого есть левое меню навигации, и оно было первоначально создано до моего времени только с одним уровнем элементов.Мне пришлось добавить второй уровень пунктов меню, и они прекрасно работают до такой степени, что они расширяются при щелчке по родительскому элементу, а при нажатии они делают то, что должны.Я не могу понять, как 1) выделить выбранный элемент подменю и 2) убрать выделение из родительского элемента при нажатии.

Вот разметка для элемента: 

<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>

А вот и полный CodePen .Примечание для CodePen состоит в том, что setCurrentWorkspace, вызываемый из onClick(), является действием Vuex, которое используется выше в дереве компонентов для выделения вкладок меню в других местах приложения.

Я вижу, чтокласс sub-class (определенный в active-class для дочерних элементов) применяется к обоим элементам подменю, когда выбран родительский элемент Templates, а класс v-list__group__header--active остается и в родительском элементе.

Нужно ли вручную удалять активный класс из родительского элемента Templates, а также удалять его вручную из другого элемента подменю?Или есть более простой способ сделать это с текущим API Vuetify?

...