v-model with select dropdowns in Vue - Mini Project: Build & Apply

Binding Select Dropdowns with v-model in Vue

📖 Scenario: You are building a simple form in Vue where users can choose their favorite fruit from a dropdown list.

🎯 Goal: Create a Vue component that uses v-model to bind the selected fruit from a dropdown menu to a data variable.

📋 What You'll Learn

Create a Vue component with a data variable called selectedFruit initialized to an empty string.

Create a list of fruits as an array called fruits with these exact values: 'Apple', 'Banana', 'Cherry', 'Date'.

Use a <select> element with v-model bound to selectedFruit.

Use <option> elements generated by looping over fruits to show each fruit as a choice.

Display the currently selected fruit below the dropdown.

💡 Why This Matters

🌍 Real World

Dropdown menus are common in forms for selecting options like countries, categories, or preferences. Binding them with v-model keeps the UI and data in sync easily.

💼 Career

Understanding v-model with select elements is essential for building interactive Vue applications and forms, a common task in frontend development jobs.

1

Set up the fruits array

Create a Vue component with a fruits array containing these exact strings: 'Apple', 'Banana', 'Cherry', 'Date'.

Vue

// Create a fruits array with 'Apple', 'Banana', 'Cherry', 'Date'
// Your code here

Hint

Use const fruits = ['Apple', 'Banana', 'Cherry', 'Date'] inside the <script setup> block.

2

Add selectedFruit data variable

Inside the <script setup>, create a ref called selectedFruit and initialize it to an empty string ''.

Vue

const fruits = ['Apple', 'Banana', 'Cherry', 'Date']
// Create a ref called selectedFruit initialized to ''
// Your code here

Hint

Import ref from 'vue' and create const selectedFruit = ref('').

3

Bind select dropdown with v-model

In the <template>, add a <select> element with v-model="selectedFruit". Inside it, use v-for to create <option> elements for each fruit in fruits. Use :key with the fruit name and set the option's value to the fruit.

Vue

import { ref } from 'vue'
const fruits = ['Apple', 'Banana', 'Cherry', 'Date']
const selectedFruit = ref('')

Hint

Use <select v-model="selectedFruit"> and inside it <option v-for="fruit in fruits" :key="fruit" :value="fruit">{{ fruit }}</option>.

4

Display the selected fruit

Below the <select>, add a <p> element that shows the text "Selected fruit: " followed by the value of selectedFruit using mustache syntax.

Vue

import { ref } from 'vue'
const fruits = ['Apple', 'Banana', 'Cherry', 'Date']
const selectedFruit = ref('')



  
    {{ fruit }}
  
  
  

Hint

Use <p>Selected fruit: {{ selectedFruit }}</p> below the select.

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