Dynamic menu or list in VueJS

Question

Been trying to figure out how to do the dynamic list or menu with the JSON data format below:

        modules: [
            {
                module_id: 1,
                module_parent_id: 0,
                module_name: "Module 1",
                status: true,
                child: 
                    [
                        {
                        module_id: 2,
                        module_parent_id: 1,
                        module_name: "Module 2",
                        status: true,
                        child: 
                            [
                                {
                                module_id: 3,
                                module_parent_id: 1,
                                module_name: "Module 3",
                                status: true,
                                },
                                {
                                    module_id: 4,
                                    module_parent_id: 1,
                                    module_name: "Module 4",
                                    status: true,
                                },
                            ]
                        },
                        {
                            module_id: 5,
                            module_parent_id: 1,
                            module_name: "Module 5",
                            status: true,
                        },
                    ]
            },
            {
                module_id: 6,
                module_parent_id: 0,
                module_name: "Module 6",
                status: false
            }
        ]
    }
},

Already tried using v-for but it's not dynamic:

<ul v-for="module in modules">
    <li>
        {{module.module_name}}
    </li>
    <ul v-for="module_child in module.child" v-if="module.child">
        <li>
            {{module_child.module_name}}
        </li>
        <ul v-for="module_sub_child in module_child.child" v-if="module_child.child">
            <li>
                {{module_sub_child.module_name}}
            </li>
        </ul>
    </ul>
</ul>

**NOTE: I need to use v-for instead of creating a method since I am using Vue-JS toggle button plugin: https://github.com/euvl/vue-js-toggle-button . It doesn't render the plugin when I tried to do the method. (If there's no other way in doing this, maybe I'll do my own custom toggle-button..)

Here is the expected output for reference.

Answer 1

If plugin is not working, its either you forgot to add Vue.use(ToggleButton)) before using it or you are trying to place it inside your template directly.

For other components to work inside your own you must initialize it like this

import ToggleButton from 'vue-js-toggle-button'
export default {
  data: function () { . . . },
  components: {
    'toggle-button':  ToggleButton,
  },
  template: `
   <ul v-for="module in modules">
     <li>
       <toggle-button @change="onChangeEventHandler"/>
     </li>
   </ul>`
}