[Vuejs]-Vue.js – How to give the active menu link a dynamic colour

by

1👍

✅

so I finally got it to work but in a very simple way without bind and click ….

so the solution is just add a css class of your choice to the router link and seeing as when the link is active it already has the .router-link-exact-active class then just add the css styling

so the code would be like this:

  <router-link class="menuItem-active-link" :to="{name: 'dashboard'}">Dashboard</router-link>

 .router-link-exact-active.menuItem-active-link{
    border-bottom-color: #F19238;
    color:#F19238
 }

0👍

If you need to do it using strictly vue:

Add event and bind class for each link, for instance: 

 <router-link @click.native="isActive = 'dashboard'" :to="/page1" class="block py-1 md:py-3 pl-1 align-middle text-grey-900 no-underline  hover:text-red-800 border-b-4 border-gray-900 hover:border-red-800" v-bind:class="{ active: isActive == 'dashboard'" }>

Dashboard

Then in data you define:

isActive: ''

or for instance if you want dashboard link to be active when you open the page:

isActive: 'dashboard'

Then you define active style:

<style>
.active {
color: green;
}
</style>

This is just an example, then you can bind class to element you need and set the active class as you like.

Leave a comment