Toggling active nav items with BootstrapVue and VueJs

Question

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.

Stephen S · Accepted Answer · 2019-06-07 10:03:51Z

10

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>

answered Jun 7, 2019 at 10:03

Stephen S

4,0022 gold badges25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Toggling active nav items with BootstrapVue and VueJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related