Vuetify - 선택 시 서브메뉴 항목에 대한 활성 클래스 설정

Vuetify - 선택 시 서브메뉴 항목에 대한 활성 클래스 설정

왼쪽 네비게이션 메뉴가 있는 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다른 서브메뉴 항목에서 수동으로 삭제할 수 있습니까?아니면 현재 Vuetify API에서 더 쉬운 방법이 있을까요?

언급URL : https://stackoverflow.com/questions/56638395/vuetify-set-active-class-for-submenu-item-when-selected