How to Use v-model with Select in Vue

Use v-model on a <select> element to bind its selected value to a Vue component's data property. This creates two-way binding, so when the user picks an option, the data updates automatically, and vice versa.

Syntax

Use v-model on a <select> element to bind the selected value to a data property. Each <option> inside the select should have a :value attribute representing the option's value.

• v-model="selectedValue": binds the select's value to selectedValue.
• <option :value="value">: sets the option's value.

vue

<select v-model="selectedValue">
  <option :value="1">One</option>
  <option :value="2">Two</option>
  <option :value="3">Three</option>
</select>

Example

This example shows a dropdown where the selected option updates the displayed message automatically using v-model. Changing the dropdown updates the text below.

vue

<template>
  <div>
    <label for="number-select">Choose a number:</label>
    <select id="number-select" v-model="selectedNumber">
      <option :value="1">One</option>
      <option :value="2">Two</option>
      <option :value="3">Three</option>
    </select>
    <p>You selected: {{ selectedNumber }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const selectedNumber = ref(1)
</script>

Output

You selected: 1 (initially) and updates as user changes selection

Common Pitfalls

Common mistakes include:

• Not using :value on <option>, which causes the value to be a string instead of the intended type.
• Binding v-model to a non-reactive property.
• For multiple selections, forgetting to add the multiple attribute and binding to an array.

vue

<!-- Wrong: value is string, not number -->
<select v-model="selected">
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

<!-- Right: use :value to bind number -->
<select v-model="selected">
  <option :value="1">One</option>
  <option :value="2">Two</option>
</select>

Quick Reference

• v-model: binds select value to data.
• :value: binds option value with correct type.
• multiple: allows multiple selections, bind to array.

Key Takeaways

Use v-model on select to bind the selected option to a reactive data property.

Always use :value on option to bind values with correct types, not just strings.

For multiple selections, add the multiple attribute and bind to an array.

v-model creates two-way binding, so UI and data stay in sync automatically.

Ensure the bound data property is reactive (e.g., using ref or reactive).