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.

Practice

1. What does v-model do when used on a <select> dropdown in Vue?

easy

A. It binds the selected option's value to a Vue data property.

B. It disables the dropdown from user interaction.

C. It automatically submits the form when an option is selected.

D. It changes the dropdown options dynamically without user input.

Solution

1. Step 1: Understand v-model binding

   v-model creates a two-way binding between the dropdown's selected value and a Vue data property.

2. Step 2: Effect on dropdown selection

   When a user picks an option, the bound data property updates to that option's value automatically.

3. Final Answer:

   It binds the selected option's value to a Vue data property. -> Option A

4. Quick Check:

   v-model binds selection to data [OK]

Hint: v-model syncs dropdown choice with data property [OK]

Common Mistakes:

• Thinking v-model disables the dropdown
• Assuming v-model submits forms automatically
• Believing v-model changes options without user action

2. Which of the following is the correct syntax to bind a v-model to a <select> element in Vue?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Vue directive syntax

   v-model is used as a directive without colon or parentheses on form elements.

2. Step 2: Check each option's syntax

   uses correct syntax: v-model="selectedOption". Others misuse binding or add invalid characters.

3. Final Answer:

   <select v-model="selectedOption"> -> Option A

4. Quick Check:

   Use v-model="property" without colon or parentheses [OK]

Hint: Use v-model="property" directly on select [OK]

Common Mistakes:

• Adding colon before v-model
• Using parentheses after data property
• Using v-bind:model which is invalid

3. Given this Vue template snippet:

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

If the user selects "Banana", what will be displayed inside the <p> tag?

medium

A. Selected: fruit

B. Selected: banana

C. Selected: Banana

D. Selected: undefined

Solution

1. Step 1: Understand option values vs labels

   The option's value attribute is "banana" (lowercase), label is "Banana" (capitalized).

2. Step 2: v-model binds to option value

   When user selects "Banana", the bound data property fruit becomes "banana" (the value attribute).

3. Final Answer:

   Selected: banana -> Option B

4. Quick Check:

   v-model binds to option value, not label [OK]

Hint: v-model uses option's value attribute, not visible text [OK]

Common Mistakes:

• Assuming v-model binds to option label text
• Expecting data property to show variable name
• Confusing case sensitivity in values

4. What is wrong with this Vue code snippet?

<select v-model="selected">
  <option>One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

Assuming selected is initially "two", what issue will occur?

medium

A. The selected option will always be the first option regardless of v-model.

B. The dropdown will not render because of missing value on first option.

C. The v-model will throw a syntax error due to missing value attribute.

D. The first option has no value, so it binds as 'One' by default causing mismatch.

Solution

1. Step 1: Check option values

   The first option lacks a value attribute, so its value defaults to its text content "One".

2. Step 2: Compare initial v-model value

   Since selected is "two", Vue tries to match it with option values. It matches the second option, but the first option's missing value can cause confusion or unexpected behavior.

3. Final Answer:

   The first option has no value, so it binds as 'One' by default causing mismatch. -> Option D

4. Quick Check:

   Options without value default to text, causing binding issues [OK]

Hint: Always add value attribute to all options [OK]

Common Mistakes:

• Assuming missing value means empty string
• Expecting Vue to auto-assign numeric values
• Ignoring mismatch between v-model and option values

5. You want to create a dropdown with multiple selections using v-model in Vue. Which is the correct way to bind the <select> element to an array of selected values?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand multiple attribute usage

   To allow multiple selections, the multiple attribute is added without a value or with boolean true.

2. Step 2: Check v-model binding syntax

   Binding directly to an array property like selectedFruits works. Adding brackets or setting multiple as a string is incorrect.

3. Final Answer:

   <select v-model="selectedFruits" multiple> -> Option C

4. Quick Check:

   Use multiple attribute and bind v-model to array [OK]

Hint: Use multiple attribute and bind v-model to array property [OK]

Common Mistakes:

• Adding brackets [] in v-model binding
• Setting multiple="true" as string attribute
• Using :multiple="true" unnecessarily