CODEWITHSUNDEEP
javascriptvue.jsbootstrap-4
Mtlj1991
Mtlj1991

Reputation: 197

Toggling active nav items with BootstrapVue and VueJs

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.

Upvotes: 6

Views: 4830

Answers (1)

Stephen S
Stephen S

Reputation: 3994

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>

Upvotes: 10

Related Questions