How to Use Boostrap With Vue to Make a Dropdown

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.

---

---

More Vue Tutorials

• Methods in Vue
• Use the Ternary Operator for Conditionals in Vue
• Vue Email Validation
• How to Copy Content to the Clipboard in Vue
• Creating Computed Properties with Vue's Composition API
• Toggle Visibility in Vue
• Add Global Variables to Vue JS Templates