Issue with Menu dropdown in the navbar

[Raf008]

hi,

Thanks for the template its fantatic. I need a little help with the dropdown in navbar. It looks like this html is not working:

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>

Here is what I have done to kind of accommodate a work around:

<li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" v-on:click.prevent="showDropDown=!showDropDown">
                        Homer Simpson
                      </a>
                      <div v-if="showDropDown" >
                        <ul class="navbar-nav" >
                          <li class="nav-item" v-for="link in links" >
                              <a href="#">{{link.name}}</a>
                          </li>
                        </ul>
                      </div>
                    </li>

any thoughts how I can make this better?

[Raf008]

I resolved it. For anyone that is having this issues. Make sure that you "import 'bootstrap';" in app.js. Please also keep in mind that if you are not using entire bootstrap for your application, you can import only the components that you need. Example:

import 'bootstrap/js/dist/util'; import 'bootstrap/js/dist/dropdown';