title: Vue + Nuxt js: How to apply dynamic active class to parent menu using bootstrap navbar
body: <p>I am new to vue + nuxt.js</p>
  <p>I am using bootstrap navbar. See this <a href="https://bootstrap-vue.js.org/docs/components/navbar/" rel="nofollow noreferrer">link</a></p>
  <p>I have following code.</p>
  <pre class="lang-vue prettyprint-override"><code>&lt;b-nav-item-dropdown type=&quot;dark&quot;&gt;
    &lt;template slot=&quot;button-content&quot;&gt;
      &lt;i class=&quot;fas fa-user&quot;&gt;&lt;/i&gt; Users
    &lt;/template&gt;
    &lt;b-dropdown-item ref=&quot;users&quot; to=&quot;/users&quot; nuxt-link-active=&quot;/users&quot;&gt;
      Listing
    &lt;/b-dropdown-item&gt;
    &lt;b-dropdown-item to=&quot;/users/add&quot; nuxt-link-active=&quot;/users/add&quot;&gt;
      Add new user
    &lt;/b-dropdown-item&gt;
  &lt;/b-nav-item-dropdown&gt;
  &lt;b-nav-item-dropdown bg-transparent&gt;
    &lt;template slot=&quot;button-content&quot;&gt;
      &lt;i class=&quot;fas fa-users&quot;&gt;&lt;/i&gt; Teams
    &lt;/template&gt;
    &lt;b-dropdown-item to=&quot;/teams&quot; nuxt-link-active=&quot;/teams&quot;&gt;
      Listing
    &lt;/b-dropdown-item&gt;
    &lt;b-dropdown-item to=&quot;/teams/add&quot; nuxt-link-active=&quot;/teams/add&quot;&gt;
      Add new team
    &lt;/b-dropdown-item&gt;
  &lt;/b-nav-item-dropdown&gt;
  </code></pre>
  <p>Now i want a parent menu to be open when child is clicked. In current scenario when i click on Team Listing, it closes the parent div so cannot identify which menu is open. Also when i click on user listing it should close team menu.</p>
  <p>I tried many way by googling. But cannot find proper solution.</p>