CODEWITHSUNDEEP
vue.jsvuejs2bootstrap-4
minisaurus
minisaurus

Reputation: 1196

bootstrap vue all b-dropdown-item with router link are active

I'm really enjoying Vue and Bootstrap Vue - very nice. However, one small issue - here's my template:

<template>
  <div >
    <b-dropdown variant="link" size="lg" no-caret>
      <template slot="button-content">
        <img src="../assets/logo.png">
      </template>
      <div v-for="row in navOptions" :key="row.id">
        <b-dropdown-item v-bind:to="row.url" >{{ row.text }}</b-dropdown-item>
      </div>
      <b-dropdown-item>User</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

The generated html for the items in the v-for loop is:

<a data-v-6949e825="" href="/xxxx/map" class="dropdown-item active" role="menuitem" target="_self">Map</a>

My problem is the "active" that is added to the class, it looks poor: image showing problem and isn't relevant as the items are not active.

I have the same issue with <b-nav-item>

Is there bootstrap vue way to disable 'active'?

Upvotes: 1

Views: 5685

Answers (2)

Cava
Cava

Reputation: 5672

For me does not work. The solution that worked for me:

<b-dropdown-item :to="{ path: '/new-task' }">New Task</b-dropdown-item>

More here: https://github.com/bootstrap-vue/bootstrap-vue/issues/3066#issuecomment-491258662

Upvotes: 2

Jacopo Vendramin
Jacopo Vendramin

Reputation: 49

You can do something like this:

<router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>

This is going to create an

  • tag with the active property and is going to change on the bases of the route.

    If you are creating nested routes like /something/somethingelse is order to add the active class at /something li you need to add the exact property

    Upvotes: 4

    • Related Questions