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.