Question

我有一个带有左导航菜单的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可以更轻松地做到这一点？

Vuetify-选定子菜单项时，请为其设置活动类别

0 个答案: