v-model with select dropdowns in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the selected value after user chooses an option?

Consider this Vue 3 component using v-model with a <select> dropdown. What will be the value of selected after the user picks "Banana"?

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('apple')
</script>

A "banana"

B "Banana"

C "APPLE"

D undefined

💡 Hint

Remember that the value attribute in <option> sets the actual value bound by v-model.

The v-model binds the selected variable to the value of the chosen <option>. Since the option for Banana has value="banana", the selected becomes "banana" (all lowercase).

📝 Syntax

intermediate

Which option correctly binds multiple selections with v-model?

You want to allow users to select multiple fruits from a dropdown using v-model. Which code snippet correctly binds the selected values as an array?

A

<select v-model="selected" multiple="false">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>
<script setup>
import { ref } from 'vue'
const selected = ref([])
</script>

B

<select v-model="selected">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>
<script setup>
import { ref } from 'vue'
const selected = ref([])
</script>

C

<select v-model="selected" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>
<script setup>
import { ref } from 'vue'
const selected = ref('')
</script>

D

<select v-model="selected" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>
<script setup>
import { ref } from 'vue'
const selected = ref([])
</script>

💡 Hint

To select multiple options, the multiple attribute must be present and the bound variable should be an array.

Option D correctly uses the multiple attribute on the <select> and binds selected as an array. This allows multiple selections to be stored as an array of values.

Option D lacks multiple, so only one value can be selected.

Option D uses a string for selected, which is incorrect for multiple selections.

Option D sets multiple="false", which disables multiple selection.

🔧 Debug

advanced

Why does the selected value not update in this Vue component?

This Vue 3 component uses v-model on a <select>, but the displayed selected value never changes when the user picks a different option. What is the cause?

Vue

<template>
  <select v-model="selected">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <p>Selected: {{ selected }}</p>
</template>

<script setup>
let selected = '1'
</script>

A The variable 'selected' is not reactive because it is declared with 'let' instead of 'ref'.

B The <code>value</code> attributes must be numbers, not strings.

C The <code>v-model</code> directive is missing a colon.

D The <code>&lt;option&gt;</code> tags must have a closing tag.

💡 Hint

Check how Vue tracks changes to variables in script setup.

In Vue 3's script setup, variables must be reactive to update the UI. Declaring selected with let creates a plain variable that Vue does not track. Using ref makes it reactive and updates the UI when changed.

🧠 Conceptual

advanced

What happens if you bind v-model to a non-reactive variable?

In Vue 3, if you bind v-model on a <select> to a variable declared as const selected = 'apple' (a plain string), what will happen when the user changes the selection?

A The selection will update but the variable will remain unchanged.

B The UI will not update to reflect the new selection because the variable is not reactive.

C The browser will throw a runtime error because <code>v-model</code> requires a ref.

D Vue will automatically convert the variable to a reactive ref and update the UI.

💡 Hint

Think about how Vue tracks changes to variables for reactivity.

Vue only tracks changes to reactive variables like those created with ref or reactive. Binding v-model to a plain string means Vue cannot detect changes, so the UI won't update when the user selects a different option.

❓ state_output

expert

What is the final value of 'selected' after these user actions?

Given this Vue 3 component with a multiple select dropdown, the user first selects "apple" and "banana", then deselects "apple" and selects "cherry". What is the final value of selected?

Vue

<template>
  <select v-model="selected" multiple>
    <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([])
</script>

A ["apple", "cherry"]

B ["apple", "banana", "cherry"]

C ["banana", "cherry"]

D ["banana"]

💡 Hint

Remember that v-model updates the array to match the current selected options exactly.

Initially, the user selects "apple" and "banana", so selected is ["apple", "banana"]. Then the user deselects "apple" and selects "cherry", so the final selection is ["banana", "cherry"].

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