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

nwlqm0z1 于 2023-03-24 发布在 Vue.js

关注(0)|答案(2)|浏览(155)

我在侧边栏中有一个菜单（* 使用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"属性确保所有元素始终处于活动状态，删除该属性会导致正确的功能。duh！

vue.js

来源：https://stackoverflow.com/questions/52123358/how-to-highlight-selected-item-in-the-vuetify-menu

2条答案

按热度按时间

m1m5dgzv1#

默认情况下，Vuetify将通过匹配当前路由来突出显示活动的链路元素。
CodeSandbox示例。
但是，如果需要，您可以控制此行为，如v-list-tile的API文档和active-class属性所示。您可以使用类似于以下内容的内容手动匹配当前路由到列表项：

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

赞(0）回复(0）举报 2023-03-24

fnx2tebb2#

如果希望在导航到子页面时仍然突出显示list-item，请将exact属性设置为false

赞(0）回复(0）举报 2023-03-24