[Vuejs]-VUE-JS – CHECKBOX V-MODEL

by

0👍

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

Leave a comment