How to highlight active menu item in vue.js?

Question

Vue.js

There is a menu

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

How can I change the color of the active menu item?

Answer 1

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

active - this is the name of the
item class - this is what you already use in the cycle
currentlyActiveItem - a variable from data that stores the current active item
https://ru.vuejs.org/v2/guide/class-and-style.html - read here
https://codepen.io/Bondar/pen/OzWYNd - here's another example