When I click on a menu item, I want the active class to be triggered only for that specific item and removed for the others. So far, I have written this code:
<template>
<nav class="navbar">
<div class="navbar__brand">
<router-link to="/">Stock Trader</router-link>
</div>
<div class="navbar__menu">
<ul class="navbar__menu--list">
<li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}">
<router-link to="/portfolio">Portfolio</router-link>
</li>
<li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}">
<router-link to="/stocks">Stocks</router-link>
</li>
</ul>
</div>
<div class="navbar__menu--second">
<ul class="navbar__menu--list">
<li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}">
<a href="#">End Day</a>
</li>
<li @click="isActive=!isActive" class="navbar__menu--item" :class="{active:isActive}">
<a href="#">Save / Load</a>
</li>
</ul>
</div>
</nav>
</template>
<script>
export default {
data(){
return{
isActive: false
}
}
}
</script>
Currently, clicking on any item adds/removes the active class for all items. What is the best approach to ensure that only the clicked item receives the active class?