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"].