v-model with select dropdowns in Vue - Step-by-Step Execution

Concept Flow - v-model with select dropdowns

User opens dropdown

↓

User selects option

↓

v-model updates bound variable

↓

Component re-renders with new value

↓

Dropdown shows selected option

This flow shows how selecting an option updates the bound variable via v-model and updates the displayed selection.

Execution Sample

Vue

<template>
  <select v-model="selected">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
  </select>
  <p>Selected: {{ selected }}</p>
</template>

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

A Vue component with a select dropdown bound to a reactive variable using v-model.

Execution Table

Step	User Action	v-model Variable (selected)	Component Rendered Output
1	Component loads	"banana"	Dropdown shows Banana selected Paragraph shows: Selected: banana
2	User clicks dropdown	"banana"	Dropdown shows Banana selected Paragraph shows: Selected: banana
3	User selects 'Apple'	"apple"	Dropdown shows Apple selected Paragraph shows: Selected: apple
4	User selects 'Cherry'	"cherry"	Dropdown shows Cherry selected Paragraph shows: Selected: cherry
5	User selects 'Banana'	"banana"	Dropdown shows Banana selected Paragraph shows: Selected: banana

💡 User stops interacting; v-model variable reflects last selected option.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5
selected	"banana"	"apple"	"cherry"	"banana"

Key Moments - 3 Insights

Why does the dropdown show the correct option selected when the component loads?

Because the v-model variable 'selected' is initialized to 'banana', so Vue sets the dropdown's selected option to match this value as shown in execution_table step 1.

What happens to the 'selected' variable when the user picks a new option?

The v-model directive updates the 'selected' variable immediately to the chosen option's value, as seen in execution_table steps 3, 4, and 5.

How does the displayed paragraph update when selection changes?

Vue re-renders the template automatically when 'selected' changes, updating the paragraph text to show the current selection, visible in the rendered output column.

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What is the value of 'selected' after the user selects 'Apple'?

A "apple"

B "banana"

C "cherry"

D "undefined"

💡 Hint

Check the 'v-model Variable (selected)' column at step 3 in the execution_table.

At which step does the dropdown show 'Cherry' as selected?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Component Rendered Output' column for the step where 'Cherry' is shown selected.

If the initial value of 'selected' was 'apple', what would the dropdown show on component load?

A Cherry selected

B Banana selected

C Apple selected

D No option selected

💡 Hint

Refer to the variable_tracker start value and how it affects the dropdown's initial selection.

Concept Snapshot

v-model with select dropdowns:
- Bind a variable with v-model on <select>
- Options have value attributes
- Initial variable value sets selected option
- User selection updates variable
- Template re-renders showing current selection

Full Transcript

This example shows how Vue's v-model directive binds a variable to a select dropdown. When the component loads, the variable 'selected' is set to 'banana', so the dropdown shows Banana selected. When the user picks a different option, like Apple or Cherry, v-model updates 'selected' immediately. Vue then re-renders the component to show the new selection in both the dropdown and the paragraph below. This two-way binding keeps the UI and data in sync automatically.