Vue.js 2+ Checkbox Tutorial with Examples

Last updated on by Digamber
This tutorial explains how to work with Form’s Checkbox input in Vue.js 2+ using a v-model directive.

A checkbox is an HTML form component that permits the user to select or multiple options from a given set of multiple options.

Usually checkboxes can be created using the HTML <input> tag. Checkboxes are added inside a <form> component, and we can even add the separately for some specific task.

Let’s understand what the v-model is?

The v-model directive offers two-way data bindings for form input items like textarea and select items. It automatically chooses the accurate method to update the form item based on the input type.

The v-model is a core form object which helps to update the data when a user triggers an event on any form element.

We must set the initial value of form elements within the data() of your Vue component because the v-model doesn’t set the initial property for checked, selected, or value props. However, it relies totally on the Vue instance data.

Vue Checkbox Example

To show you the checkbox examples, we need to set up a basic form and give you the overall overview of adding the checkbox value using the v-model directive inside a Vue Form.

Check out our previous tutorial, If you would like to Getting Started with Vue.js Forms.

I assume you have already set up a Vue Application on our local development system. Place the following code inside your Vue template.

The form is a standard HTML tag that is used to initiate the form, and we bind the handleSubmit event to the @submit.prevent=””. This will trigger the form when clicked on submit button.

The v-model directive is used to set up the object of the Vue.js form. As you can see, we defined the user, which is a form object that will contain all the form’s value. The accept is the checkbox property that will be communicating with the form object for user-selected value.

<template>
    <div class="container">

        <form @submit.prevent="handleSubmit">
            <div class="form-group form-check">
                <input type="checkbox" v-model="user.accept" id="accept" class="form-check-input">
                <label class="form-check-label" for="accept">Accept terms and conditions</label>
            </div>
            <div class="form-group">
              {{user.accept}}
            </div>

            <div class="form-group">
                <button class="btn btn-primary">Submit</button>
            </div>
        </form>
        
    </div>
</template>

<script>

    export default {
        data() {
            return {
                user: {
                    accept: false
                }
            };
        },
        methods: {
            handleSubmit() {
                alert(JSON.stringify(this.user));
            }
        }
    };
</script>

You can view the checkbox property inside the $v: Object.

Vue.js 2+ Checkbox Examples

Vue Set Checkbox as Checked

In this step, we will set the initial checkbox value to be checked. To do this, we need to bind the checkbox value with the v-model directive.

This can be done by applying simple logic, and that is. Set the checkbox value to true, so if the value is truthy, then the initial state will be checked.

<template>
    <form @submit.prevent="handleSubmit">
        <div class="form-group form-check">
            <input type="checkbox" v-model="user.accept" id="accept" class="form-check-input">
            <label class="form-check-label" for="accept">Accept terms and conditions</label>
        </div>
    </form>
</template>

<script>
export default {
    data() {
        return {
            user: {
                accept: true
            }
        };
    }
};
</script>

Create Multiple Checkboxes Dynamically in Vue 2+

Let us create the multiple checkboxes dynamically using v-for directive.

What if we have multiple values and that needs to be displayed with checkboxes in the Vue template. We can put a simple logic, define the array for the checkbox inside the Vue form object, bind it to the v-model directive.

The v-for directive is used to run to display iterative values from a pre-defined array object in the Vue template.

Now, even you can verify that all the selected values of a checkbox is quickly saving in the Vue Form object.

<template>
    <form @submit.prevent="handleSubmit">
        <div class="form-group form-check" v-for="item in Items" v-bind:key="item.id">
            <label class="form-check-label" :for="item.id">{{item.name}}</label>
            <input type="checkbox"  v-model="user.fruitCollection" :id="item.name" :value="item.name">
        </div>

        <!-- print result -->
        <div class="form-group">
                {{user.fruitCollection}}
        </div>

        <div class="form-group">
            <button class="btn btn-primary">Submit</button>
        </div>
    </form>
</template>

<script>
export default {  
    data() {
        return {
            Items: [
                {
                    name: 'Apple'
                }, 
                {
                    name: 'Orange'
                }, 
                {
                    name: 'Mengo'
                }, 
                {
                    name: 'Cherry'
                }
            ],            
            user: {
                fruitCollection: []
            }
        };
    },
    methods: {
        handleSubmit() {
            alert(JSON.stringify(this.user));
        }
    }    
};
</script>

Create Multiple Checkboxes Dynamically in Vue 2+