v-model with select dropdowns in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the selected option to the variable using v-model.

Vue

<template>
  <select [1]="selected">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
  </select>
  <p>Selected fruit: {{ selected }}</p>
</template>

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

Drag options to blanks, or click blank then click option'

Av-model

Bv-bind

Cv-if

Dv-for

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind instead of v-model will only bind the value one way.

Using v-if or v-for here does not bind the value.

The v-model directive binds the select element's value to the selected variable, updating it automatically when the user changes the selection.

2fill in blank

medium

Complete the code to initialize the selected option with the value 'banana'.

Vue

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

Drag options to blanks, or click blank then click option'

A'banana'

B'apple'

C'cherry'

D'orange'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a value not present in the options will show no selection.

Forgetting quotes around the string causes syntax errors.

The selected variable is initialized with the string 'banana' so the dropdown shows Banana as selected initially.

3fill in blank

hard

Fix the error in the select element to correctly bind the selected value using v-model.

Vue

<template>
  <select v-model=[1]>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </select>
  <p>Selected color: {{ color }}</p>
</template>

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

Drag options to blanks, or click blank then click option'

A"color"

B{color}

C'color'

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Adding quotes makes Vue treat it as a string literal, not a variable.

Using braces is invalid syntax for v-model binding.

The v-model directive expects a JavaScript variable name without quotes or braces. Using v-model=color correctly binds the select to the color variable.

4fill in blank

hard

Fill both blanks to create a select dropdown that binds to 'choice' and has options generated from 'options' array.

Vue

<template>
  <select [1]="choice">
    <option v-for="item in [2]" :key="item" :value="item">{{ item }}</option>
  </select>
  <p>Selected: {{ choice }}</p>
</template>

<script setup>
import { ref } from 'vue'
const choice = ref('')
const options = ['One', 'Two', 'Three']
</script>

Drag options to blanks, or click blank then click option'

Av-model

Bv-bind

Coptions

Ditems

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind instead of v-model for binding the select value.

Using a wrong variable name in the v-for loop.

The v-model directive binds the select to the choice variable. The v-for loops over the options array to create option elements.

5fill in blank

hard

Fill all three blanks to create a select dropdown with multiple selection enabled, binding to 'selectedItems' array, and options from 'items'.

Vue

<template>
  <select [1]="selectedItems" [2]="Select items" multiple>
    <option v-for="item in [3]" :key="item" :value="item">{{ item }}</option>
  </select>
  <p>Selected items: {{ selectedItems.join(', ') }}</p>
</template>

<script setup>
import { ref } from 'vue'
const selectedItems = ref([])
const items = ['A', 'B', 'C', 'D']
</script>

Drag options to blanks, or click blank then click option'

Av-model

Baria-label

Citems

Dv-bind

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add 'multiple' attribute for multi-select.

Not using v-model for binding the selected values.

Missing aria-label reduces accessibility.

v-model binds the multiple select to the selectedItems array. The aria-label improves accessibility by describing the select. The items array is used to generate options.

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