Vuejs Form Input Binding with Checkbox option

In this post you will learn how to use checkbox input binding in vuejs, it is easy to use directly v-model there is not any complex to learn using v-model you can easy to bind checkbox value in data.

If you know that checkbox always tasks more than one value, or the user can select more than one value that time we must need to use the checkbox.

In this post taken the example of framework language that you have experience so here users can select more than one technology or you can say more than two frameworks of one language.

One more thing you should keep in mind, which is checkbox always takes more then one value so your checkbox value is always keep in an array inside, you can not take it single value as a string.

In this example I have taken the data object of checkbox that is array. if you select more than a single value that will push into this array.

Example: Vuejs form input binding with checkbox

Here below working example, you can put in your application.

<template>
    <div class="container mt-5 border">
        <label for="">Select Technology :</label>
        <div class="d-flex">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" name="language" id="vue" value="vue" v-model="checkbox">
                <label class="form-check-label" for="vue">Vue</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" name="language" id="react" value="react" v-model="checkbox">
                <label class="form-check-label text-nowrap" for="react">React</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" name="language" id="node" value="node" v-model="checkbox">
                <label class="form-check-label text-nowrap" for="node">Node</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" name="language" id="angular" value="angular" v-model="checkbox">
                <label class="form-check-label text-nowrap" for="angular">Angular</label>
            </div>
        </div>
        <br>
        <p>Technology : {{ checkbox }}</p>
        <ul>
            <li v-for="(val,index) in checkbox" :key="index">{{ val }}</li>
        </ul>
    </div>
</template>
      
<script>
    
export default {

    name:"Checkbox",

    data(){
        return {
            checkbox:['vue']
        }
    }
}
    
</script>
      
<style scoped>
// YOUR CUSTOM STYLE OF THIS COMPONENT
</style>

Also, one thing I have taken default checkbox values in this checkbox if you don't want to take, then keep empty array as default value.

Thanks for read our Vuejs post...

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)