Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

active-class on nav-item not working

See original GitHub issue

Hello.

We have updated to latest BootstrapVue version (rc13) and noticed, that active-class for b-nav-item stopped working. This is also reproducible on documentation pages and https://jsfiddle.net/n4ekygf8/. I checked with Firefox(65.0.2) and Chrome(72.0.3626.119). I am not a Vue or bootstrap expert, but before it worked as expected 😃

Best, Zakhar

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

tmorehousecommented, Mar 5, 2019

Also note, the active-class is only applied if you are using vue-router and there is a to prop on the component (the docs are running under Nuxt, which uses vue-router under the hood).

Vue-router (not BootstrapVue) applies the active class when the to prop path/location matches the current route/page url.

See updated fiddle: https://jsfiddle.net/ozu2ny58/

0reactions

tmorehousecommented, Mar 6, 2019

The reason it was working before was that you were taking advantage of a bug in <b-nav-item> in how the vue-router active-class prop was being used/applied.