Question

我在侧边栏中有一个菜单（使用vue-router）：

        <v-list>
            <v-list-tile
                value="true"
                v-for="(item, i) in menu"
                :key="i"
                :to="item.path"
            >
                {{item.name}}
            </v-list-tile>
        </v-list>

，它工作正常，但是在Vuetify文档中我没有看到任何有关突出显示所选菜单项的信息。任何帮助表示赞赏。

更新：事实证明我不是很聪明。设置value="true"属性可确保所有元素始终处于活动状态，并删除导致正常功能的元素。 h！

Answer 1

默认情况下，Vuetify将通过与当前路线匹配来突出显示活动的链接元素。

CodeSandbox示例。

但是，如果需要，您可以控制v-list-tile和active-class属性的API文档中所示的行为。您可以使用类似于以下内容的方法手动将当前路线与列表项匹配：

<v-list-tile 
    v-for="(item, i) in menu"
    :key="i"
    :to="item.path" 
    active-class="highlighted"
    :class="item.path === $route.path ? 'highlighted' : ''"
>
    {{item.name}}
</v-list-tile>

另请参见Vue Router文档中的linkActiveClass。

如何在Vuetify菜单中突出显示所选项目？

1 个答案: