v-model with checkboxes in Vue - Step-by-Step Execution

Concept Flow - v-model with checkboxes

User clicks checkbox

↓

Checkbox checked or unchecked?

↓

Add value

↓

Update bound array

↓

Re-render checkboxes with new state

When a user clicks a checkbox, Vue checks if it is checked or unchecked. It adds or removes the checkbox's value from the bound array, then updates the UI.

Execution Sample

Vue

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

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

This code binds two checkboxes to an array 'selected'. Checking a box adds its value to the array; unchecking removes it.

Execution Table

Step	User Action	Checkbox State	Array Before	Array After	UI Update
1	Clicks 'Apple' checkbox	Checked	[]	["apple"]	Shows Selected: ["apple"]
2	Clicks 'Banana' checkbox	Checked	["apple"]	["apple", "banana"]	Shows Selected: ["apple", "banana"]
3	Clicks 'Apple' checkbox again	Unchecked	["apple", "banana"]	["banana"]	Shows Selected: ["banana"]
4	Clicks 'Banana' checkbox again	Unchecked	["banana"]	[]	Shows Selected: []

💡 User stops interacting; array reflects current checked boxes.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
selected	[]	["apple"]	["apple", "banana"]	["banana"]	[]

Key Moments - 3 Insights

Why does the array 'selected' hold multiple values?

Because v-model on checkboxes binds to an array that collects all checked values. See execution_table rows 1 and 2 where values are added.

What happens when a checkbox is unchecked?

The value is removed from the array. Look at execution_table rows 3 and 4 where values are removed from 'selected'.

Can the array contain duplicate values?

No, Vue ensures each value appears only once in the array. The execution_table shows values added or removed, never duplicated.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'selected' after Step 2?

A ["apple", "banana"]

B ["banana"]

C ["apple"]

D []

💡 Hint

Check the 'Array After' column in row for Step 2.

At which step does the 'apple' value get removed from the array?

A Step 1

B Step 4

C Step 3

D Step 2

💡 Hint

Look for when 'apple' disappears from 'Array After' in execution_table.

If the user checks 'Banana' first, how would the array look after Step 1?

A ["apple"]

B ["banana"]

C []

D ["apple", "banana"]

💡 Hint

The array adds the value of the checked box; see variable_tracker for how values are added.

Concept Snapshot

v-model with checkboxes binds an array to multiple checkboxes.
Checking a box adds its value to the array.
Unchecking removes the value.
The array always reflects current checked boxes.
Use value attribute to specify each checkbox's value.

Full Transcript

This lesson shows how Vue's v-model works with checkboxes. When a user clicks a checkbox, Vue checks if it is checked or unchecked. If checked, Vue adds the checkbox's value to the bound array. If unchecked, Vue removes that value. The array always holds the current selected values. The UI updates to show the selected array. This is useful for multiple selections. The example uses two checkboxes for 'apple' and 'banana'. The variable 'selected' starts empty. Clicking 'apple' adds 'apple' to the array. Clicking 'banana' adds 'banana'. Unchecking removes values accordingly. This keeps the array in sync with the checkboxes.