v-model with checkboxes in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when selecting checkboxes bound with v-model array?

Consider this Vue component using v-model with checkboxes. What will be the value of selectedFruits after the user checks 'Apple' and 'Banana'?

Vue

<template>
  <div>
    <label><input type="checkbox" value="Apple" v-model="selectedFruits"> Apple</label>
    <label><input type="checkbox" value="Banana" v-model="selectedFruits"> Banana</label>
    <label><input type="checkbox" value="Cherry" v-model="selectedFruits"> Cherry</label>
  </div>
</template>

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

A ["Apple", "Banana"]

B ["Apple"]

C ["Banana"]

D []

💡 Hint

Remember that v-model on checkboxes with the same array binds all checked values into that array.

When multiple checkboxes share the same v-model bound to an array, Vue automatically adds or removes the checkbox's value to/from the array as the user checks or unchecks them. Checking 'Apple' and 'Banana' adds both strings to the array.

📝 Syntax

intermediate

Which option correctly binds a single checkbox with v-model to a boolean?

You want to bind a single checkbox to a boolean value using v-model. Which code snippet correctly achieves this?

A <input type="checkbox" v-model="isChecked" checked>

B <input type="checkbox" v-model="isChecked" value="true">

C <input type="checkbox" v-model="isChecked" :value="true">

D <input type="checkbox" v-model="isChecked">

💡 Hint

For a single checkbox, v-model binds to a boolean by default.

Using v-model on a single checkbox binds the checked state to a boolean variable. Adding a value attribute changes the behavior to array binding or string values, which is not desired here.

🔧 Debug

advanced

Why does this checkbox group not update the array with v-model?

Given this Vue code, why does checking the boxes not update the selectedColors array?

Vue

<template>
  <div>
    <label><input type="checkbox" :value="color" v-model="selectedColors"> {{ color }}</label>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const colors = ['Red', 'Green', 'Blue']
const selectedColors = ref([])
</script>

A The template is missing a loop to render checkboxes for each color.

B The v-model should be on the label, not the input.

C The :value binding is incorrect; it should be a string literal.

D selectedColors should be a reactive object, not a ref.

💡 Hint

Check if all checkboxes are rendered for each color.

The code only renders one checkbox with a variable color that is undefined in the template. To bind multiple checkboxes, you need to loop over colors to create one checkbox per color.

❓ state_output

advanced

What is the value of selectedOptions after toggling checkboxes?

In this Vue component, what is the value of selectedOptions after the user checks 'Option1', then 'Option3', then unchecks 'Option1'?

Vue

<template>
  <label><input type="checkbox" value="Option1" v-model="selectedOptions"> Option1</label>
  <label><input type="checkbox" value="Option2" v-model="selectedOptions"> Option2</label>
  <label><input type="checkbox" value="Option3" v-model="selectedOptions"> Option3</label>
</template>

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

A []

B ["Option1", "Option3"]

C ["Option3"]

D ["Option2", "Option3"]

💡 Hint

Remember that unchecking removes the value from the array.

Initially, checking 'Option1' adds it to the array. Checking 'Option3' adds it too. Unchecking 'Option1' removes it, leaving only 'Option3' in the array.

🧠 Conceptual

expert

What error occurs if v-model is used on a checkbox without a value attribute in a group?

In Vue, when using multiple checkboxes bound to the same array with v-model, what happens if one checkbox lacks a value attribute?

Vue

<template>
  <label><input type="checkbox" v-model="selected" value="A"> A</label>
  <label><input type="checkbox" v-model="selected"> B</label> <!-- Missing value -->
</template>

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

A Vue throws a runtime error because value is required for checkboxes with array v-model.

B The checkbox without value uses 'on' as its default value, adding 'on' to the array when checked.

C The checkbox without value is ignored and never added to the array.

D The checkbox without value binds as a boolean instead of string.

💡 Hint

Check the default value of a checkbox input in HTML when no value attribute is set.

In HTML, a checkbox without a value attribute defaults to the string 'on'. Vue uses this default as the value added to the array when checked.