Checkbox Binding

Checkbox Binding

Continuing the blog form, let us add checkboxes for selecting categories. Vue's v-model handles both single checkboxes (boolean) and multiple checkboxes (array) automatically.

Single Checkbox (Boolean)

<label>
    <input type="checkbox" v-model="blog.published">
    Publish immediately
</label>

data: {
    blog: { published: false }
}
// When checked: blog.published = true
// When unchecked: blog.published = false

Multiple Checkboxes (Array)

<label><input type="checkbox" value="JavaScript" v-model="blog.categories"> JavaScript</label>
<label><input type="checkbox" value="Vue" v-model="blog.categories"> Vue</label>
<label><input type="checkbox" value="CSS" v-model="blog.categories"> CSS</label>
<label><input type="checkbox" value="Node" v-model="blog.categories"> Node</label>

<p>Selected: {{ blog.categories }}</p>

data: {
    blog: { categories: [] }
}
// Checking JavaScript and Vue: blog.categories = ['JavaScript', 'Vue']

When multiple checkboxes share the same v-model and the data property is an array, Vue adds/removes values as checkboxes are toggled.

Key Takeaways

• Single checkbox + v-model → boolean (true/false)
• Multiple checkboxes + same v-model + array data → array of checked values
• Each checkbox needs a unique value attribute for multi-select to work