Edward Lance Lorilla

HOW TO SELECT VUEJS CHECK ALL UNCHECK ALL CHECKBOXES

	<div class="container">
	<div id="app">
	<h4>Names</h4>
	<div>
	<table class="table">
	<tr>
	<th><input type="checkbox" v-model="checkAll"></th>
	<th align="center">ID</th>
	<th align="center">Names</th>
	</tr>
	<tr v-for="lang in langs">
	<td>
	<input type="checkbox" v-model="checked" :value="lang.id" number>
	</td>
	<td> {{ lang.id }}</td>
	<td> {{ lang.name }}</td>
	</tr>
	</table>
	</div>
	</div>
	</div>

	new Vue({
	data: {
	langs: [
	{ "id": "1", "name": "Edward"},
	{ "id": "2", "name": "Lance"},
	{ "id": "3", "name": "Arellano"},
	{ "id": "4", "name": "Lorilla"},
	],
	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;
	}
	}
	}
	}).$mount('#app');