VUE-JS - CHECKBOX V-MODEL - json

Question

enter image description here Hi Everyone Newbie at VUE.JS
I have a Checkboxes for MODULES and FUNCTIONS
I want to insert a Functions for every MODULE I have
Here's my sample code
<label> Modules:</label>
<li v-for="subModule1 in subModules" :key="subModule1.id">
<input type="checkbox" v-model="dataModules" :value="subModule1" />
{{subModule1}}<br>
[enter image description here][1]
{{subFunction}}
</div>

Answer 1

One thing that you could do is to create component like bellow I am not sure it will be a perfect solution but it should work atleast
<template>
<div>
<div v-for="module in modules" :key="module.text">
<h3>{{module.text}}</h3>
<ul>
<li
v-for="subModule in module.subModules"
:key="subModule.text"
>
{{subModule.text}}
<input type="checkbox" v-model="subModule.value"/>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'Example',
data(){
return {
modules:[
{
text:"Module 1",
subModules:[
{
text:"1-A",
value:false,
},
{
text:"1-b",
value:false,
}
]
},
{
text:"Module 2",
subModules:[
{
text:"2-A",
value:false,
},
{
text:"2-b",
value:false,
}
]
}
]
}
}
}
</script>
With this you are binding with array key is text but you can change it to something else and if you want to add new module or sub module just add it to array and it should be added to ui
If module dont pick new added items you something like deep copy and assign new array to module