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)
Handling select dropdowns in Vue enables dynamic option selection with two-way data binding, perfect for forms, filters, and user preference interfaces. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented select dropdowns in thousands of Vue applications for data filtering, user settings, and form controls. From my expertise, the most effective approach is using v-model for binding with v-for for dynamic options and proper value handling. This method provides reactive dropdown controls with clean data synchronization and flexible option management.
Use v-model with select elements and v-for to render dynamic options from data arrays.
<template>
<div>
<h3>Select your country:</h3>
<select v-model="selectedCountry">
<option value="">Choose a country</option>
<option
v-for="country in countries"
:key="country.code"
:value="country.code"
>
{{ country.name }}
</option>
</select>
<h3>Select your skills:</h3>
<select v-model="selectedSkills" multiple>
<option
v-for="skill in skills"
:key="skill"
:value="skill"
>
{{ skill }}
</option>
</select>
<div>
<p>Selected country: {{ selectedCountry }}</p>
<p>Selected skills: {{ selectedSkills }}</p>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const selectedCountry = ref('')
const selectedSkills = ref([])
const countries = ref([
{ code: 'us', name: 'United States' },
{ code: 'ca', name: 'Canada' },
{ code: 'uk', name: 'United Kingdom' },
{ code: 'de', name: 'Germany' }
])
const skills = ref([
'JavaScript',
'Vue.js',
'React',
'Angular',
'Node.js'
])
</script>
The v-model directive creates two-way binding between the select element and reactive data. Use :value to bind option values and v-for to dynamically render options from arrays. For multiple selections, add the multiple attribute and bind to an array. The selected values automatically update the bound reactive variables.
Best Practice Note:
This is the same select dropdown handling approach we use in CoreUI Vue components for form controls and filter interfaces in dashboard applications.
