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