This tutorial explains how to work with Form’s Checkbox Input in Vue Js using a v-model directive.
A check box is an HTML Form Component that permits the user to select from multiple options from a given set of various options.
Usually, checkboxes can be created using the HTML <input> tag. Checkboxes are added inside a <form> component and we can even add them separately for some specific tasks.
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 that helps 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 our 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.
Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
To remove the above error for invoking the app, we have to make sure to update the “scripts”: [] array in the package.json file:
"scripts": {
"serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
"lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},
Vue Multi-word Error
To remove the multi-word error, we will add the following code in the vue.config.js file:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
})
Vue Checkbox Example
In order to show the checkbox examples, we need to set up a basic form and give us the overall overview of adding the checkbox value using the v-model directive inside a Vue Form.
After setting up a Vue application, we will place the given code inside our 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 we can see that we defined the user which is a form object that will contain all the form’s values. The accept is the checkbox property that will be communicating with the form object for the 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>
We can view the checkbox property inside the $v: Object:
Vue Set Checkbox As Checked
In this step, we will set the initial checkbox 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 to set the checkbox value to true. If the value is true, 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
Now, we will create the multiple checkboxes dynamically using the v-for directive.
What if we have multiple values and those need to be displayed with the checkboxes in the vue template. We can put a simple logic, i.e to define the array for the checkbox inside the Vue form object, then 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, we can verify 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>
Conclusion
So, in this Vue js guide, we have simply learned how to work with Form’s Checkbox input in Vue js using a v-model directive:
Thanks