Check all checkboxes vuejs
Adding my own answer as edits on the answer by nhydock weren't accepted (I think?).
Solution selects and selects all.
HTML
<div id="app">
<h4>User</h4>
<div>
<table>
<tr>
<th>Name</th>
<th>Select <input type="checkbox" @click="selectAll" v-model="allSelected"></th>
</tr>
<tr v-for="user in users">
<td>{{ user.name }}</td>
<td><input type="checkbox" v-model="userIds" value="{{ user.id }}"></td>
</tr>
</table>
</div>
<span>Selected Ids: {{ userIds | json }}</span>
</div>
Javascript/Vuejs
new Vue({
el: '#app',
data: {
users: [
{ "id": "1", "name": "Shad Jast", "email": "[email protected]"},
{ "id": "2", "name": "Duane Metz", "email": "[email protected]"},
{ "id": "3", "name": "Myah Kris", "email": "[email protected]"},
{ "id": "4", "name": "Dr. Kamron Wunsch", "email": "[email protected]"},
{ "id": "5", "name": "Brendon Rogahn", "email": "[email protected]"}
],
selected: [],
allSelected: false,
userIds: []
},
methods: {
selectAll: function() {
this.userIds = [];
if (!this.allSelected) {
for (user in this.users) {
this.userIds.push(this.users[user].id);
}
}
},
}
})
Working fiddle: https://jsfiddle.net/okv0rgrk/3747/
How about my answer, with less properties, easy to understand?
new Vue({
el: '#app',
data: {
users: [{
"id": "1",
"name": "Shad Jast",
"email": "[email protected]",
'checked': false
}, {
"id": "2",
"name": "Duane Metz",
"email": "[email protected]",
'checked': false
}, {
"id": "3",
"name": "Myah Kris",
"email": "[email protected]",
'checked': false
}, {
"id": "4",
"name": "Dr. Kamron Wunsch",
"email": "[email protected]",
'checked': false
}, ],
},
computed: {
selectAll: function() {
return this.users.every(function(user){
return user.checked;
});
}
},
methods: {
toggleSelect: function() {
var select = this.selectAll;
this.users.forEach(function(user) {
user.checked = !select;
});
this.selectAll = !select;
},
}
});<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<h4>User</h4>
<div>
<table>
<tr>
<th>Name</th>
<th>Select
<input type="checkbox" @click="toggleSelect" :checked="selectAll">
</th>
</tr>
<tr v-for="user in users">
<td>{{ user.name }}</td>
<td>
<input type="checkbox" v-model="user.checked">
</td>
</tr>
</table>
</div>
</div>I think @Jeremy's answer is cleaner way, but it require for checked property on each user object which is makes no sense if the data come from an API request.
Here is working and cleaner code for select/deselect all rows without having to add checked property on user object:
new Vue({
el: '#app',
data: {
users: [
{ "id": "1", "name": "Shad Jast", "email": "[email protected]" },
{ "id": "2", "name": "Duane Metz", "email": "[email protected]" },
{ "id": "3", "name": "Myah Kris", "email": "[email protected]" },
{ "id": "4", "name": "Dr. Kamron Wunsch", "email": "[email protected]" }
],
selected: []
},
computed: {
selectAll: {
get: function () {
return this.users ? this.selected.length == this.users.length : false;
},
set: function (value) {
var selected = [];
if (value) {
this.users.forEach(function (user) {
selected.push(user.id);
});
}
this.selected = selected;
}
}
}
});<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<h4>User</h4>
<div>
<table>
<tr>
<th><input type="checkbox" v-model="selectAll"></th>
<th align="left">Name</th>
</tr>
<tr v-for="user in users">
<td>
<input type="checkbox" v-model="selected" :value="user.id" number>
</td>
<td>{{ user.name }}</td>
</tr>
</table>
</div>
</div>Please note that the number attribute on row's checkbox is required, otherwise you have to push the user id selectAll method as a string, like selected.push(user.id.toString());