[Vuejs]-Bootstrap : dropdown button doesn't work anymore

by

0👍

✅

Well finally i found out the reason why it doesn’t work : It was in fact upgrading issue . I add this <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" > <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> instead of my bootswatch call since there are some uncompatibilities with Vue.js and i used this <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> to call Vue.js instead of <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vue-scrollto"></script> that seems to be overdated for Vue call . Hope it will help some other members .

0👍

You use a v-on:click but why not use the standard code from dropdown from bootstrap

You can do it like this:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
    Info contact
  </a>

  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">14, rue xxx, 92270 Bois Colombes</a>
    <a class="dropdown-item" href="http://www.linkedin.com/in/xxx">www.linkedin.com/in/xxx</a>
    <a class="dropdown-item" href="xxx.xxx@yahoo.fr">xx.xx@yahoo.fr</a>
  </div>
</div>

You just have to add your icons. Also for future reference I would not add your head in your question but instead just the dropdown in the body and specificy your language used in the code block so its easier to read.

Leave a comment