How to Use the Select Tag with Vue

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:

<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:

<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>

---

---

More Vue Tutorials

• Methods in Vue
• Use the Ternary Operator for Conditionals in Vue
• Vue Email Validation
• How to Copy Content to the Clipboard in Vue
• Creating Computed Properties with Vue's Composition API
• Toggle Visibility in Vue
• Add Global Variables to Vue JS Templates