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!