Vue js checkbox checked event example; Through this tutorial, i am going to show you how to get checked checkbox value in vue js app with v-model.
How to Get Checked Checkbox Values in VUE JS
Follow the below steps and learn how to get checked checkbox value in vue js app with v-model:
- Step 1 – Create New VUE JS App
- Step 2 – Navigate to Vue Js App
- Step 3 – Create Component
- Step 4 – Add Component on App.vue
Step 1 – Create New VUE JS App
Run the following command on terminal to create new vue js app:
vue create my-app
Step 2 – Navigate to Vue Js App
Run the following command to enter your vue js app root directory:
cd my-app
Step 3 – Create Component
Go to /src/components directory and create a new component called checkbox-event.vue and add the following code into it:
<!DOCTYPE html>
<html>
<head>
<title>Vue Js Get Checked Value of Checkbox If Use Array As A Model - Laratutorials.com</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
<div class="container">
<div class="col-md-7 offset-md-2 ">
<div class="card mt-5">
<div class="card-header">
<h5>Vue Js Get Checked Value of Checkbox If Use Array As A Model - Laratutorials.com</h5>
</div>
<div class="card-body">
<div id='myapp'>
<!-- Check All -->
<input type='checkbox' @click='checkAll()' v-model='isCheckAll'> Check All
<!-- Checkboxes list -->
<ul>
<li v-for='lang in langsdata'>
<input type='checkbox' v-bind:value='lang' v-model='languages' @change='updateCheckall()'>{{ lang }}
</li>
</ul>
<!-- Print -->
<input type='button' @click='printValues()' value='Print Selected Values'>
<br>
Selected items : {{ selectedlang }}
</div>
</div>
</div>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue'></script>
<script>
var app = new Vue({
el: '#myapp',
data: {
isCheckAll: false,
langsdata: ["PHP","Vue.js","AngularJS","jQuery","JavaScript"],
languages: [],
selectedlang: ""
},
methods: {
checkAll: function(){
this.isCheckAll = !this.isCheckAll;
this.languages = [];
if(this.isCheckAll){ // Check all
for (var key in this.langsdata) {
this.languages.push(this.langsdata[key]);
}
}
},
updateCheckall: function(){
if(this.languages.length == this.langsdata.length){
this.isCheckAll = true;
}else{
this.isCheckAll = false;
}
},
printValues: function(){
this.selectedlang = "";
// Read Checked checkboxes value
for (var key in this.languages) {
this.selectedlang += this.languages[key]+", ";
}
}
}
})
</script>
</body>
</html>
Step 4 – Add Component on App.vue
Go to /src/ directory and App.vue file. And then add the following code into it:
<template>
<CheckboxEvent></CheckboxEvent>
</template>
<script>
import CheckboxEvent from './components/CheckboxEvent';
export default {
components: {
CheckboxEvent
}
}
</script>
Conclusion
Vue js checkbox checked event example. In this tutorial, you have learned how to get checked checkbox value in vue js app.
Recommended VUE JS Tutorials
Recommended:-Vue Js If Else Condition Example
Recommended:-Vue Js For Loop (v-for) Example
Recommended:-Vue JS Ajax Form Submit Tutorial
Recommended:-Laravel 8 Install Vue Tutorial Example
Recommended:-Laravel 8 Vue JS Axios Post Request Tutorial Example
Recommended:-How to Show Flash Message Using Vue JS in Laravel 8
Recommended:-How to Create Laravel 8 Vue JS Like Dislike System
Recommended:-Laravel 8 Vue JS Image/File Upload Tutorial Example
Be First to Comment