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!

More Vue Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!