Toggling active nav items with BootstrapVue and VueJs

user_8450963 0
Viewed 4079

Currently using VueJs and Bootstrap Vue and I'm wondering how to use appending the "active" tag to the Nav links I have set up.

   <div>
        <b-nav tabs align="center">

            <b-nav-item>
                <b-link to="/">Home</b-link>
            </b-nav-item>

             <b-nav-item>
                <b-link to="/table">Table</b-link>
            </b-nav-item>

        </b-nav>
    </div>

How would I be able to turn it into the following?

    <div>
        <b-nav tabs align="center">

            <b-nav-item>
                <b-link to="/" active>Home</b-link>
            </b-nav-item>

             <b-nav-item>
                <b-link to="/table">Table</b-link>
            </b-nav-item>

        </b-nav>
    </div>

I've tried @click events to toggle a boolean and set a class that way but I've not had much success.

bootstrap-4 vue.js javascript
1 Answers

You can use the $route object to check the route name and bind it to the active prop.

<b-link to="/table" :active='$route.name =="Table"'>Table</b-link>
user_39322340
Related