VueJS Master Checkbox Toggle with array values
Posted By: Anonymous
I am using VueJS and am having a problem implementing two features on a series of checkboxes.
- Firstly, my checkboxes are build dynamically.
- I need to implement a master ‘toggle’ checkbox which when clicked either checks or un-checks all other checkboxes.
- I need to keep an array of checked items in the model.
This script gives me the toggle checkbox, but does not populate the “checkedNames” array. I have tried adding a v-model to the names checkboxes but that just checked everything and still doesn’t populate the array.
_x000D_
_x000D_
new Vue({_x000D_
el: '#boxes',_x000D_
data: {_x000D_
checked: null,_x000D_
checkedNames: [],_x000D_
teams: [{_x000D_
name: 'team a',_x000D_
id: 'team-a',_x000D_
checked: null,_x000D_
members: [{_x000D_
'id': 1,_x000D_
'name': 'Dave'_x000D_
},_x000D_
{_x000D_
'id': 2,_x000D_
'name': 'Dee'_x000D_
},_x000D_
{_x000D_
'id': 3,_x000D_
'name': 'Dozy'_x000D_
},_x000D_
{_x000D_
'id': 4,_x000D_
'name': 'Beaky'_x000D_
},_x000D_
{_x000D_
'id': 5,_x000D_
'name': 'Mick'_x000D_
},_x000D_
{_x000D_
'id': 6,_x000D_
'name': 'Tich'_x000D_
}_x000D_
]_x000D_
},_x000D_
{_x000D_
name: 'team b',_x000D_
id: 'team-b',_x000D_
checked: null,_x000D_
members: [{_x000D_
'id': 7,_x000D_
'name': 'John'_x000D_
},_x000D_
{_x000D_
'id': 8,_x000D_
'name': 'Paul'_x000D_
},_x000D_
{_x000D_
'id': 9,_x000D_
'name': 'George'_x000D_
},_x000D_
{_x000D_
'id': 10,_x000D_
'name': 'Ringo'_x000D_
}_x000D_
]_x000D_
}_x000D_
]_x000D_
}_x000D_
});_x000D_
<div id='boxes'>_x000D_
<ul>_x000D_
<li v-for="team in teams" style="width: 100px; float:left">_x000D_
<div>_x000D_
<input type="checkbox" class="form-check form-check-inline" v-bind:id="team.id" v-model="team.checked">_x000D_
<label v-bind:for="team.id"><strong>{{ team.name }}</strong></label>_x000D_
</div>_x000D_
<ul class="countries_list">_x000D_
<li v-for="member in team.members">_x000D_
<input type="checkbox" class="form-check form-check-inline" v-bind:id="member.id" v-bind.checked="{checked : team.checked}">_x000D_
<label v-bind:for="member.id">{{ member.name }}</label>_x000D_
</li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
<br>_x000D_
<span>Checked names: {{ checkedNames }}</span>_x000D_
</div>_x000D_
<script src="https://cdn.jsdelivr.net/npm/vue"></script>_x000D_
_x000D_
_x000D_
https://jsfiddle.net/50wL7mdz/133578/
Is anyone able to point me in the right direction?
Solution
This is a bit tricky. I think you need to control everything using @change as you have your checkAll checkboxes feature.
In my side, I don’t need those parent checked properties, all I need is the children checked property to distinguised either checked/unchecked. Basically this is a fallback as you have to add extra property checked.
Check and try to run the snippet below.
_x000D_
_x000D_
new Vue({_x000D_
el : '#boxes',_x000D_
data : {_x000D_
teams: [_x000D_
{_x000D_
name: 'team a',_x000D_
id: 'team-a',_x000D_
members: [_x000D_
{'id': 1, 'name' : 'Dave', 'checked': false},_x000D_
{'id': 2, 'name' : 'Dee', 'checked': false},_x000D_
{'id': 3, 'name' : 'Dozy', 'checked': false},_x000D_
{'id': 4, 'name' : 'Beaky', 'checked': true},_x000D_
{'id': 5, 'name' : 'Mick', 'checked': false},_x000D_
{'id': 6, 'name' : 'Tich', 'checked': false}_x000D_
]_x000D_
},_x000D_
{_x000D_
name: 'team b',_x000D_
id: 'team-b',_x000D_
members: [_x000D_
{'id': 7, 'name' : 'John', 'checked': false},_x000D_
{'id': 8, 'name' : 'Paul', 'checked': false},_x000D_
{'id': 9, 'name' : 'George', 'checked': false},_x000D_
{'id': 10, 'name' : 'Ringo', 'checked': false},_x000D_
{'id': 11, 'name' : 'Mick', 'checked': false}_x000D_
]_x000D_
}_x000D_
]_x000D_
},_x000D_
computed: {_x000D_
getSelectedMembers: function() {_x000D_
var selectedMem = [];_x000D_
for(var teamIdx in this.teams) {_x000D_
var members = this.teams[teamIdx].members;_x000D_
for(var memberIdx in members) {_x000D_
if (members[memberIdx].checked) {_x000D_
selectedMem.push(members[memberIdx].id);_x000D_
}_x000D_
}_x000D_
}_x000D_
return selectedMem;_x000D_
}_x000D_
},_x000D_
methods: {_x000D_
checkAll: function(idx, $event) {_x000D_
var member = this.teams[idx].members;_x000D_
for(var memberIdx in member) {_x000D_
member[memberIdx].checked = $event.target.checked;_x000D_
}_x000D_
}_x000D_
}_x000D_
});_x000D_
.disp {_x000D_
display: inline-block;_x000D_
}_x000D_
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>_x000D_
<script src="https://unpkg.com/vue"></script>_x000D_
_x000D_
<div id='boxes'>_x000D_
<ul>_x000D_
<li v-for="(team, index) in teams" style="width: 200px; float:left">_x000D_
<div>_x000D_
<input type="checkbox" class="form-check form-check-inline" v-bind:id="team.id" @change="checkAll(index, $event)" >_x000D_
<label v-bind:for="team.id"><strong>{{ team.name }}</strong></label>_x000D_
</div>_x000D_
<ul class="countries_list">_x000D_
<li v-for="member in team.members">_x000D_
<input type="checkbox" class="form-check form-check-inline" v-bind:id="member.id" v-bind.checked="{checked : member.checked}" :value="member.name" @change="member.checked = !member.checked">_x000D_
<label v-bind:for="member.id">{{ member.name }}</label>_x000D_
</li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
<div>getSelectedMembers: {{ getSelectedMembers }}</div>_x000D_
<br><br><br><br><br><br><br><br><br>_x000D_
<div class="disp" v-for="team in teams">_x000D_
<ul><strong>{{ team.id }}</strong>_x000D_
<li v-for="member in team.members" v-if="member.checked">{{member.name}}</li>_x000D_
</ul>_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
_x000D_
_x000D_
Answered By: Anonymous
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.
