How to handle select dropdown in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Creating select dropdowns is fundamental for building user-friendly forms and filtering interfaces in Vue applications. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented countless dropdown components and form controls over 25 years of development. From my expertise, the most effective approach is using v-model with the select element and v-for to generate options dynamically from data arrays. This creates reactive dropdowns that automatically update when data changes and provide seamless two-way binding.
Use v-model with select element and v-for to create reactive dropdown menus.
<template>
<select v-model="selectedCountry">
<option disabled value="">Choose a country</option>
<option v-for="country in countries" :key="country.code" :value="country.code">
{{ country.name }}
</option>
</select>
</template>
<script>
export default {
data() {
return {
selectedCountry: '',
countries: [
{ code: 'US', name: 'United States' },
{ code: 'CA', name: 'Canada' }
]
}
}
}
</script>
Here v-model="selectedCountry" creates two-way binding between the select element and the data property. The v-for directive generates option elements from the countries array, using :key for Vue’s reactivity and :value to set the option values. The disabled placeholder option provides user guidance when no selection is made.
Best Practice Note:
This is the same dropdown implementation pattern we use in CoreUI Vue components for consistent form controls. Always provide a disabled placeholder option for better UX, use meaningful key attributes for option elements, and consider implementing search functionality for long option lists.
