Как подсветить активный пункт меню во vue.js?

Question

[Sector567]

Есть меню

<ul>
                <li
                    v-for="(item, index) in menuList"
                    :key="index">
                    <a>{{item}}</a>
                </li>
            </ul>

Как можно изменить цвет активного пункта меню?

Comments

[origami1024]

А как ты определяешь, что он активный? у тебя vue-router или по адресу страницы?

[Sector567]

origami1024, не, просто по клику

[origami1024]

Sector567, по клику значит нужно в какую-то переменную записывать какой пункт меню является сейчас активным.
Ну и в зависимости от ее значения включать .актив стиль для нужного элемента

[Sector567]

origami1024, а как получить именно тот элемент из списка, который будет активным?

[origami1024]

<a :class="{active: item == currentlyActiveItem}">{{item}}</a>

active - это название класса
item - это то что у тебя уже используется в цикле
currentlyActiveItem - переменная из data, хранящая текущий актив итем

https://ru.vuejs.org/v2/guide/class-and-style.html - вот почитать

[Sector567]

origami1024, все еще не могу разобраться(

[origami1024]

вот примерчиг
https://codepen.io/Bondar/pen/OzWYNd

[Sector567]

origami1024, теперь понял, спасибо

[origami1024]

Sector567, подсуммировал тебе в ответ в погоне за лойсами

Answer 1

[origami1024]

<a :class="{active: item == currentlyActiveItem}">{{item}}</a>

active - это название класса
item - это то что у тебя уже используется в цикле
currentlyActiveItem - переменная из data, хранящая текущий актив итем

https://ru.vuejs.org/v2/guide/class-and-style.html - вот почитать
https://codepen.io/Bondar/pen/OzWYNd - вот еще примерчиг

Comments

[Sector567]

Большое спасибо