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

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 文档中没有看到任何关于突出显示所选菜单项的内容。感谢您的帮助！

UPDATE: 原来我不是很聪明。设置 value="true" 属性确保所有元素始终处于活动状态，删除它会导致正常运行。呃！

Answer 1

Vuetify 默认会通过匹配当前路由来突出显示活动的 link 元素。

CodeSandbox example.

但是，如果需要，您可以控制此行为，如 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 菜单中突出显示所选项目？

How to highlight selected item in the Vuetify menu?

menu

vue.js

vue-router

vuetify.js