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