Javascript VueJS中的动态菜单或列表

我一直在试图找出如何使用下面的JSON数据格式创建动态列表或菜单：

        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
            }
        ]
    }
},

已尝试使用v-for，但它不是动态的：

<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>

{{module.module_name}



{{module_child.module_name}



{{module_sub_child.module_name}

**注意：我需要使用v-for而不是创建方法，因为我使用的是Vue JS切换按钮插件：。当我尝试使用该方法时，它不会呈现插件。（如果没有其他方法，我可能会使用自己的自定义切换按钮。）

---

以下是供参考的插件。

如果插件不起作用，可能是您在使用它之前忘记添加

Vue.use（ToggleButton））

，或者您正试图将它直接放在模板中

要使其他组件在您自己的内部工作，您必须初始化 是这样吗

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>`
}

从“vue js切换按钮”导入切换按钮
导出默认值{
数据：函数（）{…}，
组成部分：{
“切换按钮”：切换按钮，
},
模板：`



`
}

Hi@ken，如果我使用v-html，我认为Vue不会呈现或使用插件。因为我有一个计算和构造html元素的函数。类似这样的内容：

*script*方法：{menuBuilder:function（data）{create或construct the menu…}}