I have an Array of checkbox which already divided in to groups and I need to check all child checkbox if parent is checked and uncheck if parent is uncheck and then update all their state in Array. This wayyy over my head since I'm realy new to Vue.
I setup a Codepen here, and I can't change Array's structure since it's a JSON response from server.
Js
let tree = [
{
"text": "AccountController",
"id": 1,
"state": {
"opened": false,
"selected": true,
"disabled": false
},
"children": [
{
"text": "Index",
"id": 2,
"state": {
"opened": false,
"selected": true,
"disabled": false
},
"children": null
},
{
"text": "Login",
"id": 3,
"state": {
"opened": false,
"selected": true,
"disabled": false
},
"children": null
},
...
]
},
{
"text": "BaseController",
"id": 19,
"state": {
"opened": false,
"selected": true,
"disabled": false
},
"children": [
{
"text": "GetErrorListFromModelState",
"id": 20,
"state": {
"opened": false,
"selected": true,
"disabled": false
},
"children": null
},
{
"text": "GetErrorFromModelState",
"id": 21,
"state": {
"opened": false,
"selected": true,
"disabled": false
},
"children": null
},
...
]
}
]
let app = new Vue({
el : '#clone',
data : {
items : tree,
},
methods : {
submitForm() {
console.log(tree);
}
}
});
Html
<div id="clone">
<button @click="submitForm">click</button>
<div class="dd">
<ol class="dd-list">
<li v-for="(item, index) in items"
v-bind:class="[item.state.opened ? 'dd-item open' : 'dd-item']">
<div class="dd-handle"
@click="item.state.opened = !item.state.opened">
<input type="checkbox"
:disabled="item.state.disabled"
:name="item.text"
:checked="item.state.selected"
@click="item.state.selected = !item.state.selected">
<label :for="item.text">{{item.text}}</label>
</div>
<ol v-if="item.children.length != 0" class="dd-list">
<li v-for="(children, index) in item.children"
:data-id="children.id" class="dd-item">
<div class="dd-handle">
<input type="checkbox"
:name="children.text"
:checked="children.state.selected"
:disabled="children.state.disabled"
@click="children.state.selected = !children.state.selected">
<label :for="children.text">{{children.text}}</label>
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
Can someone enlighten me please. Thank in advance!
I have an Array of checkbox which already divided in to groups and I need to check all child checkbox if parent is checked and uncheck if parent is uncheck and then update all their state in Array. This wayyy over my head since I'm realy new to Vue.
I setup a Codepen here, and I can't change Array's structure since it's a JSON response from server.
Js
let tree = [
{
"text": "AccountController",
"id": 1,
"state": {
"opened": false,
"selected": true,
"disabled": false
},
"children": [
{
"text": "Index",
"id": 2,
"state": {
"opened": false,
"selected": true,
"disabled": false
},
"children": null
},
{
"text": "Login",
"id": 3,
"state": {
"opened": false,
"selected": true,
"disabled": false
},
"children": null
},
...
]
},
{
"text": "BaseController",
"id": 19,
"state": {
"opened": false,
"selected": true,
"disabled": false
},
"children": [
{
"text": "GetErrorListFromModelState",
"id": 20,
"state": {
"opened": false,
"selected": true,
"disabled": false
},
"children": null
},
{
"text": "GetErrorFromModelState",
"id": 21,
"state": {
"opened": false,
"selected": true,
"disabled": false
},
"children": null
},
...
]
}
]
let app = new Vue({
el : '#clone',
data : {
items : tree,
},
methods : {
submitForm() {
console.log(tree);
}
}
});
Html
<div id="clone">
<button @click="submitForm">click</button>
<div class="dd">
<ol class="dd-list">
<li v-for="(item, index) in items"
v-bind:class="[item.state.opened ? 'dd-item open' : 'dd-item']">
<div class="dd-handle"
@click="item.state.opened = !item.state.opened">
<input type="checkbox"
:disabled="item.state.disabled"
:name="item.text"
:checked="item.state.selected"
@click="item.state.selected = !item.state.selected">
<label :for="item.text">{{item.text}}</label>
</div>
<ol v-if="item.children.length != 0" class="dd-list">
<li v-for="(children, index) in item.children"
:data-id="children.id" class="dd-item">
<div class="dd-handle">
<input type="checkbox"
:name="children.text"
:checked="children.state.selected"
:disabled="children.state.disabled"
@click="children.state.selected = !children.state.selected">
<label :for="children.text">{{children.text}}</label>
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
Can someone enlighten me please. Thank in advance!
Share Improve this question edited Nov 29, 2017 at 15:41 Bert 82.5k17 gold badges203 silver badges166 bronze badges asked Nov 29, 2017 at 14:41 VK Da NINJAVK Da NINJA 5207 silver badges19 bronze badges 8-
This is easy to do, you just need to add
parent/childprops to the parent and childrens and it would be better next time to post it in jsfiddle – samayo Commented Nov 29, 2017 at 14:46 - I already setup a Codepen here and I can't change the array structure. – VK Da NINJA Commented Nov 29, 2017 at 14:49
-
It's pretty simple even if you can't change the array structure. Just add an event handler like click and pass down an event & index to it
@click='clicked($event ,index)'and from that index you can iterate through the array and check/uncheck the fields .. – samayo Commented Nov 29, 2017 at 15:12 - Also make sure to use jsfiddle next time, it's a lot better than codepen to try/modify some of this stuff – samayo Commented Nov 29, 2017 at 15:12
- @samayo I find codepen far nicer to work with than jsfiddle. – Bert Commented Nov 29, 2017 at 15:23
1 Answer
Reset to default 3In the template,
<input type="checkbox"
:disabled="item.state.disabled"
:name="item.text"
:checked="item.state.selected"
@click="item.state.selected = !item.state.selected"
@change="onChange(item, item.state.selected)">
And add the method,
methods : {
submitForm() {
console.log(tree);
},
onChange(item, state){
for(let child of item.children){
child.state.selected = state
}
}
}
Updated pen.