v-model with checkboxes in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the checkbox to the data property using v-model.

Vue

<template>
  <input type="checkbox" [1]="checked" />
</template>

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

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

Av-bind

Bv-if

Cv-model

Dv-for

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind instead of v-model causes one-way binding only.

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

The v-model directive binds the checkbox's checked state to the checked data property, syncing user interaction with the data.

2fill in blank

medium

Complete the code to bind multiple checkboxes to an array using v-model.

Vue

<template>
  <input type="checkbox" value="apple" [1]="fruits" /> Apple
  <input type="checkbox" value="banana" [1]="fruits" /> Banana
</template>

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

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

Av-bind

Bv-if

Cv-show

Dv-model

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind does not update the array on user clicks.

Using v-if or v-show does not bind the checkbox values.

Using v-model on checkboxes with a shared array allows multiple selections to be stored in the fruits array.

3fill in blank

hard

Fix the error in the code by completing the directive to correctly bind the checkbox group.

Vue

<template>
  <input type="checkbox" value="red" [1]="colors" /> Red
  <input type="checkbox" value="blue" [1]="colors" /> Blue
</template>

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

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

Av-model

Bv-bind

Cv-if

Dv-show

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind causes the checkboxes not to update the array.

Using v-if or v-show does not bind the checkbox values.

The v-model directive correctly binds the checkbox group to the colors array, allowing multiple selections and initial values.

4fill in blank

hard

Fill both blanks to create a checkbox group bound to an array and display the selected items.

Vue

<template>
  <input type="checkbox" value="cat" [1]="pets" /> Cat
  <input type="checkbox" value="dog" [1]="pets" /> Dog
  <p>Selected pets: [2]</p>
</template>

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

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

Av-model

Bpets.join(', ')

Cpets

Dv-bind

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind instead of v-model prevents updating the array.

Displaying the array directly shows it as an object, not a readable list.

Use v-model to bind the checkboxes to the pets array. Display the selected pets as a comma-separated string using pets.join(', ').

5fill in blank

hard

Fill all three blanks to bind checkboxes to an array, display count, and disable a checkbox conditionally.

Vue

<template>
  <input type="checkbox" value="java" [1]="languages" :disabled="languages.length >= 2 && !languages.includes('java')" /> Java
  <input type="checkbox" value="python" [1]="languages" :disabled="languages.length >= 2 && !languages.includes('python')" /> Python
  <input type="checkbox" value="js" [1]="languages" :disabled="languages.length >= 2 && !languages.includes('js')" /> JavaScript
  <p>Selected count: [2]</p>
  <p>Selected languages: [3]</p>
</template>

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

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

Av-model

Blanguages.length

Clanguages.join(', ')

Dv-bind

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind disables two-way binding.

Displaying the array directly shows an object, not a readable list.

Not disabling checkboxes allows selecting more than two.

Use v-model to bind checkboxes to the languages array. Show the count with languages.length and list selected languages with languages.join(', '). The checkboxes disable when two are selected, preventing more selections.