How to Use Boostrap With Vue to Make a Dropdown

Mar 18, 2021

Vue mostly works nicely with Bootstrap's dropdowns using similar syntax to the <select> tag in HTML.

Below is an example of using a Bootstrap dropdown to choose between 'A', 'B', and 'C'. Note that Bootstrap dropdowns do not work with Vue's v-model directive, you need to explicitly register a @click event handler as shown below.

Vue.createApp({
  template: `
  <div class="dropdown">
    <button
      class="btn btn-primary dropdown-toggle"
      type="button" id="dropdownMenuButton1"
      data-bs-toggle="dropdown"
      aria-expanded="false">
      Dropdown button: {{value}}
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1" role="menu">
      <li v-for="option in options" :key="option">
        <a class="dropdown-item" @click="value = option" href="javascript:void(0)">{{option}}</a>
      </li>
    </ul>
  </div>
  `,
  data: () => ({
    options: ['A', 'B', 'C'],
    value: 'B'
  })
});

Below is a live example in an iframe:

Note that the role="menu" and href="javascript:void(0)" properties are important to enable keyboard shortcuts on the dropdown, like being able to hit the "up" and "down" keys in order to select an option without using the mouse. Learn more about the void operator in JavaScript here.


Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Vue Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!