How to Use the Select Tag with Vue
Mar 9, 2021
In HTML, the <select> tag lets you create a dropdown that
lets the user select one of several options. The easiest way
to tie Vue state to the value of a <select> tag is using
v-model. Below is an example:
Your Choice is: {{selected}}
<script src="https://unpkg.com/vue@next"></script>
<div style = "outline-style: solid" id="example">
<select v-model="selected">
<option disabled value="">Please Select</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span style="padding-left:5%">Your Choice is: {{selected}}</span>
</div>
<script>
Vue.createApp({
data() {
return {
selected: ''
};
}
}).mount('#example');
</script>Note: On iOS, if the initial value of your v-model does not match any of the
options, it will cause the browser to render the <select> tag in a "unselected" state. Any browser running on iOS won't fire a change event for a <select> in an unselected tag, which means the user won't be able to select the first option. Therefore, we recommend using a disabled option with an empty value as the first element.
With v-for
With v-for, you can create an option for every value in an array.
Below is an example:
Your Choice is: {{selected}}
<script src="https://unpkg.com/vue@next"></script>
<div style = "outline-style: solid" id="demo">
<select v-model="selected">
<option disabled value="">Please Select</option>
<option v-for="option in options" :value="option">{{option}}</option>
</select>
<span style="padding-left:5%">Your Choice is: {{selected}}</span>
</div>
<script>
Vue.createApp({
data() {
return {
selected: '',
options: [
'A',
'B',
'C'
]
};
}
}).mount('#demo');
</script>
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!