VueJS中的动态菜单或列表

Question

一直在尝试找出如何使用以下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>

**注意：由于我使用的是Vue-JS切换按钮插件，因此我需要使用v-for而不是创建方法： https : //github.com/euvl/vue-js-toggle-button 。 当我尝试执行此方法时，它不会呈现插件。 （如果没有其他方法可以这样做，也许我会做自己的自定义切换按钮。）

这是预期的输出以供参考。

Answer 1

如果插件不起作用，则您要么在使用前忘记添加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>`
}