Vue+Nuxt js：如何使用bootstrap navbar将动态活动类应用到父级菜单中？

Question

我是vue+nuxt.js的新手。

我正在使用bootstrap导航条。看这个 联系

我有以下代码。

<b-nav-item-dropdown type="dark">
          <template slot="button-content">
            <i class="fas fa-user"></i> Users
          </template>
          <b-dropdown-item ref="users" to="/users" nuxt-link-active="/users"
            >Listing
          </b-dropdown-item>
          <b-dropdown-item to="/users/add" nuxt-link-active="/users/add"
            >Add new user
          </b-dropdown-item>
        </b-nav-item-dropdown>
        <b-nav-item-dropdown bg-transparent>
          <template slot="button-content">
            <i class="fas fa-users"></i> Teams
          </template>
          <b-dropdown-item to="/teams" nuxt-link-active="/teams"
            >Listing
          </b-dropdown-item>
          <b-dropdown-item to="/teams/add" nuxt-link-active="/teams/add"
            >Add new team
          </b-dropdown-item>
        </b-nav-item-dropdown>

现在我希望当子菜单被点击时，父菜单被打开。在目前的情况下，当我点击团队列表时，它关闭了父菜单，所以无法识别哪个菜单是打开的。另外，当我点击用户列表时，它应该关闭团队菜单。

我尝试了许多方法，通过google。但无法找到合适的解决方案。

Answer 1

只是偶然发现了这个问题。这是我的回答，如果你仍然需要它。

你不应该使用 nuxt-link-active 在一个Bootstrap Vue元素中。

你可以使用:

<b-dropdown-item to="/teams" exact exact-active-class="active">
   Listing
</b-dropdown-item>