Vuejs active router link does not work, tried multipled ways

Question

I cannot make the active button (router-link tag) to light up.

Here is my code:

<div class="bottom-buttons">                                          
 <span v-for="button in buttons" class="button" :class="{ 'is-active': $route.path === button.path}">
  <router-link :to="button.path">
   <i :class="button.iclass"></i>
    <p class="button-label">{{button.label}}  </p> 
  </router-link>
 </span>                                                                
</div>

When I print out $route.path it returns the right path, and button.path is the data I have in the data object, and it works. So the condition should be right. But the 'is-active' class is not activated. (This thread: VueJS exact-active-class)

If I hard-code the 'is-active' class, it works.

When I use a:hover, a:visited, a:link it works, but a:active does not work :D. I have tried a:router-link-active but it does not work. (This thread: How to VueJS router-link active style)

I have tried to add linkActiveClass: 'is-active' in the /router/index.js file as suggested. It does not work. (This thread: Bulma navbar and VueJS router active link)

Anybody knows why? Or have more suggestions? Thank you in advance!

What does your `is-active` class look like? Does it override existing styles? — dziraf, May 07 '19 at 15:39
```.is-active { color: green }``` If I hardcode it the class works. — Dr Linh Chi Nguyen, May 07 '19 at 15:44
Try to change it to `.is-active { color: green !important; }` — dziraf, May 07 '19 at 15:45
There's nothing wrong with your code except you keep buttons as `span` instead of `router-link` with `tag="button"` — dziraf, May 07 '19 at 15:46
yes, that works !!! with ```!important``` and ```v-for``` on ```router-link``` :D — Dr Linh Chi Nguyen, May 07 '19 at 16:18

score 0 · Answer 1 · answered May 07 '19 at 15:37

0

It seems to be that your problem is in the class condition. Maybe try to use == instead of === in your :class?

I would have add a comment instead of an answear if i had enough reputation :)

answered May 07 '19 at 15:37

Itamar Smirra

83
1
7

1

Try to put the button span inside the ```router-link``` tag and the ```v-for``` on the ```router-link```. Let me know. – Itamar Smirra May 07 '19 at 15:48

Vuejs active router link does not work, tried multipled ways

1 Answers1