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.

Practice

1. What type of data should you use with v-model when binding to multiple checkboxes in Vue?

easy

A. A string representing the last selected checkbox

B. A boolean to represent true or false

C. An array to hold the selected values

D. A number counting how many checkboxes are checked

Solution

1. Step 1: Understand checkbox binding

   When multiple checkboxes are bound with v-model, Vue expects an array to store all selected values.

2. Step 2: Compare data types for checkboxes

   A boolean is used for single checkboxes, but for multiple checkboxes, an array collects all checked values.

3. Final Answer:

   An array to hold the selected values -> Option C

4. Quick Check:

   Multiple checkboxes = array [OK]

Hint: Multiple checkboxes always bind to an array [OK]

Common Mistakes:

• Using a boolean for multiple checkboxes
• Binding to a string instead of an array
• Expecting a number to track checked boxes

2. Which of the following is the correct syntax to bind a single checkbox with v-model in Vue?

easy

A. <input type='checkbox' v-model='checked' />

B. <input type='checkbox' :value='checked' />

C. <input type='checkbox' v-bind='checked' />

D. <input type='checkbox' v-model:value='checked' />

Solution

1. Step 1: Identify correct binding directive

   The v-model directive binds the checkbox's checked state to a data property.

2. Step 2: Check syntax correctness

   <input type='checkbox' v-model='checked' /> uses v-model='checked' which is the correct and simplest syntax for binding a single checkbox.

3. Final Answer:

   <input type='checkbox' v-model='checked' /> -> Option A

4. Quick Check:

   Single checkbox uses v-model='property' [OK]

Hint: Use v-model directly on checkbox for single binding [OK]

Common Mistakes:

• Using :value instead of v-model
• Using v-bind without specifying property
• Using v-model:value which is invalid

3. Given this Vue template code:

<template>
  <input type='checkbox' v-model='selected' value='apple' />
  <input type='checkbox' v-model='selected' value='banana' />
  <input type='checkbox' v-model='selected' value='cherry' />
  <p>Selected: {{ selected }}</p>
</template>

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

What will be displayed after the user checks the boxes for "apple" and "cherry"?

medium

A. Selected: 'apple,cherry'

B. Selected: ['apple', 'cherry']

C. Selected: ['apple']

D. Selected: true

Solution

1. Step 1: Understand v-model with multiple checkboxes

   When multiple checkboxes share the same v-model bound to an array, Vue adds the checkbox's value to the array when checked.

2. Step 2: Check which boxes are selected

   User checked "apple" and "cherry", so the array contains ['apple', 'cherry'].

3. Final Answer:

   Selected: ['apple', 'cherry'] -> Option B

4. Quick Check:

   Checked boxes values collected in array [OK]

Hint: Multiple checkboxes with same v-model store values in array [OK]

Common Mistakes:

• Expecting a string instead of an array
• Thinking only last checked value is stored
• Confusing boolean with array for multiple checkboxes

4. What is wrong with this Vue checkbox binding?

<input type='checkbox' v-model='checked' value='yes' />

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

Why does checking the box not add 'yes' to checked?

medium

A. Because checked should be a string, not boolean

B. Because value attribute is missing

C. Because v-model cannot be used on checkboxes

D. Because checked is a boolean, not an array, so value is ignored

Solution

1. Step 1: Identify data type for v-model

   The variable checked is a boolean, so Vue treats the checkbox as a single toggle (true/false).

2. Step 2: Understand effect of value attribute

   When v-model is boolean, the value attribute is ignored; it only matters when binding to an array.

3. Final Answer:

   Because checked is a boolean, not an array, so value is ignored -> Option D

4. Quick Check:

   Boolean v-model ignores value attribute [OK]

Hint: Boolean v-model ignores value; use array for multiple values [OK]

Common Mistakes:

• Thinking value attribute always affects checkbox state
• Believing v-model can't be used on checkboxes
• Using string instead of boolean or array incorrectly

5. You want to create a group of checkboxes for selecting favorite fruits using v-model. The data property is favorites initialized as an empty array. Which code snippet correctly updates favorites when users check or uncheck fruits?

hard

A. <input type='checkbox' v-model='favorites' value='apple' />
<input type='checkbox' v-model='favorites' value='banana' />
<input type='checkbox' v-model='favorites' value='cherry' />

B. <input type='checkbox' v-model='favorites' :value='true' />
<input type='checkbox' v-model='favorites' :value='false' />

C. <input type='checkbox' v-model='favorites.apple' />
<input type='checkbox' v-model='favorites.banana' />

D. <input type='checkbox' v-model='favorites' value='true' />
<input type='checkbox' v-model='favorites' value='false' />

Solution

1. Step 1: Understand array binding for multiple checkboxes

   Binding multiple checkboxes to the same array with v-model and distinct value attributes collects checked values in the array.

2. Step 2: Evaluate each option's correctness

   <input type='checkbox' v-model='favorites' value='apple' /> <input type='checkbox' v-model='favorites' value='banana' /> <input type='checkbox' v-model='favorites' value='cherry' /> correctly uses v-model='favorites' with unique string values for each checkbox, so checked fruits are added or removed from the array.

3. Final Answer:

   <input type='checkbox' v-model='favorites' value='apple' /> <input type='checkbox' v-model='favorites' value='banana' /> <input type='checkbox' v-model='favorites' value='cherry' /> -> Option A

4. Quick Check:

   Multiple checkboxes + array + unique values = correct binding [OK]

Hint: Use array with unique values for multiple checkboxes [OK]

Common Mistakes:

• Using boolean values instead of unique strings
• Binding to object properties instead of array
• Using same value for all checkboxes