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

更新:事实证明我不是很聪明。设置 value="true" 属性可确保所有元素始终处于事件状态，删除该属性会导致正常运行。呃!

Answer 1

默认情况下，Vuetify 将通过匹配当前路由来突出显示事件链接元素。

CodeSandbox example.

但是，如果需要，您可以控制此行为，如 v-list-tile 和 active-class 的 API 文档所示。属性(property)。您可以使用类似于以下内容的方式将当前路由手动匹配到列表项:

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

另见 linkActiveClass在 Vue 路由器文档中。