vue.js - Vue + Nuxt js : How to apply dynamic active class to parent menu using bootstrap navbar

Question

我是 vue + nuxt.js 的新手

我正在使用引导导航栏。看这个link

我有以下代码。

<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>

现在我希望在单击子项时打开父级菜单。在当前场景中，当我单击“团队列表”时，它会关闭父 div，因此无法识别打开了哪个菜单。此外，当我单击用户列表时，它应该关闭团队菜单。

我通过谷歌搜索尝试了很多方法。但找不到合适的解决方案。

Answer 1

刚刚偶然发现这个问题。如果您仍然需要的话，这是我的答案。

您不应在 Bootstrap Vue 元素中使用 nuxt-link-active。

您可能更愿意使用:

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