Here I am Gonna to Display an example by which you can step By step understand working of VueJs Check All Uncheck All.
We have used Some CDN for Bootstrap and Vue JS so First You need Online internet connection for them to step by step work.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://unpkg.com/vue@2.0.3/dist/vue.min.js"></script>
This is our index.html file that Data contains our sample Table that we are going to Check All Uncheck All.
<body>
<div class="container">
<h2>VueJs Check All Uncheck All Example</h2>
<p>The Simple Example of the VueJs Check All Uncheck All</p>
<div id="pakaApp">
<h4>Language Names</h4>
<div>
<table class="table">
<tr>
<th><input type="checkbox" v-model="checkAll"></th>
<th align="center">Languages Names</th>
<th align="center">Names</th>
<th align="center">Author</th>
</tr>
<tr v-for="lang in langs">
<td>
<input type="checkbox" v-model="checked" :value="lang.id" number>
</td>
<td> {{ lang.lname }}</td>
<td> {{ lang.name }}</td>
<td> {{ lang.author }}</td>
</tr>
</table>
</div>
</div>
</div>
</body>
This contains our index.js scripts.
new Vue({
el: '#pakaApp',
data: {
langs: [
{ "id": "1", "lname": "Angularjs", "author": "Jaydeep Gondaliya", "name": "jdpatel@pakainfo.com" },
{ "id": "2", "lname": "ASP.NET", "author": "Krunal Sisodiya", "name": "krunal@pakainfo.com" },
{ "id": "3", "lname": "SEO", "author": "Ankit Kathiriya", "name": "ankit@pakainfo.com" },
{ "id": "4", "lname": "PHP", "author": "Mayur Dhameliya", "name": "mayur@pakainfo.com" }
],
checked: []
},
computed: {
checkAll: {
get: function () {
return this.langs ? this.checked.length == this.langs.length : false;
},
set: function (value) {
var checked = [];
if (value) {
this.langs.forEach(function (lang) {
checked.push(lang.id);
});
}
this.checked = checked;
}
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>VueJs Check All Uncheck All Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://unpkg.com/vue@2.0.3/dist/vue.min.js"></script>
</head>
<body>
<div class="container">
<h2>VueJs Check All Uncheck All Example</h2>
<p>The Simple Example of the VueJs Check All Uncheck All</p>
<div id="pakaApp">
<h4>Language Names</h4>
<div>
<table class="table">
<tr>
<th><input type="checkbox" v-model="checkAll"></th>
<th align="center">Languages Names</th>
<th align="center">Names</th>
<th align="center">Author</th>
</tr>
<tr v-for="lang in langs">
<td>
<input type="checkbox" v-model="checked" :value="lang.id" number>
</td>
<td> {{ lang.lname }}</td>
<td> {{ lang.name }}</td>
<td> {{ lang.author }}</td>
</tr>
</table>
</div>
</div>
</div>
<script>
new Vue({
el: '#pakaApp',
data: {
langs: [
{ "id": "1", "lname": "Angularjs", "author": "Jaydeep Gondaliya", "name": "jdpatel@pakainfo.com" },
{ "id": "2", "lname": "ASP.NET", "author": "Krunal Sisodiya", "name": "krunal@pakainfo.com" },
{ "id": "3", "lname": "SEO", "author": "Ankit Kathiriya", "name": "ankit@pakainfo.com" },
{ "id": "4", "lname": "PHP", "author": "Mayur Dhameliya", "name": "mayur@pakainfo.com" }
],
checked: []
},
computed: {
checkAll: {
get: function () {
return this.langs ? this.checked.length == this.langs.length : false;
},
set: function (value) {
var checked = [];
if (value) {
this.langs.forEach(function (lang) {
checked.push(lang.id);
});
}
this.checked = checked;
}
}
}
});
</script>
</body>
</html>
We hope you get an idea about Check Uncheck All Checkbox using VueJs
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.
We hope This Post can help you…….Good Luck!.