Как выделить выбранный пункт в меню Vuetify? - PullRequest
Новая
       18

Как выделить выбранный пункт в меню Vuetify?

0 голосов
/ 01 сентября 2018

У меня есть меню на боковой панели (с использованием 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" гарантирует, что все элементы всегда активны, что приводит к правильной работе. Дух!

1 Ответ

0 голосов
/ 01 сентября 2018

Vuetify по умолчанию выделит активный элемент ссылки, сопоставляя его с текущим маршрутом.

CodeSandbox пример.

Однако при необходимости вы можете контролировать это поведение, как показано в документах API для v-list-tile и свойства 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>

См. Также linkActiveClass в документации по Vue Router.

...