v-model with select dropdowns in Vue

Introduction

v-model helps you easily connect a dropdown menu to your data. It keeps the selected option and your data in sync without extra code.

You want users to pick one option from a list and save their choice.

You need to show a dropdown that updates your app data automatically.

You want to react to changes when a user selects a different option.

You want to build forms with dropdowns that are easy to manage.

You want to keep your UI and data connected simply and clearly.

Syntax

Vue

<select v-model="selectedOption">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

The v-model directive binds the dropdown's selected value to a data property.

Make sure the value attributes on option tags match the data type you expect.

Examples

This dropdown lets you pick a fruit. The selected fruit is stored in the fruit data property.

Vue

<select v-model="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

This example adds a disabled placeholder option to prompt the user to choose.

Vue

<select v-model="color">
  <option disabled value="">Please select a color</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Here, options are created dynamically with v-for. The selected number is bound to selectedNumber.

Vue

<select v-model="selectedNumber">
  <option v-for="num in [1,2,3]" :key="num" :value="num">{{ num }}</option>
</select>

Sample Program

This Vue component shows a dropdown to pick a car brand. The selected car updates the selectedCar variable automatically. The chosen car is displayed below the dropdown. The label and aria-label improve accessibility.

Vue

<template>
  <div>
    <label for="car-select">Choose a car:</label>
    <select id="car-select" v-model="selectedCar" aria-label="Car selection">
      <option disabled value="">Select a car</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <p>You selected: {{ selectedCar || 'none' }}</p>
  </div>
</template>

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

Important Notes

Use v-model on <select> to keep the selected value and data in sync automatically.

Always provide a label for accessibility and use aria-label if the label is not visible.

When using numbers or booleans as values, remember that v-model binds the value as a string by default. Use :value binding to keep the original type.

Summary

v-model connects dropdown selection to your data easily.

Use value attributes on options to define what each choice means.

Labels and ARIA attributes help everyone use your dropdown comfortably.