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

这里是expected output供参考。

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>` }，还是试图将其直接放在模板中。

要使其他组件在您自己的内部运行，必须初始化像这样

git-msg

VueJS中的动态菜单或列表

1 个答案: