How to loop in Vue.js?

Technology CommunityCategory: Vue.jsHow to loop in Vue.js?
VietMX Staff asked 3 years ago
Problem

Consider json:

menu_items: [{
        label: "General",
        items: [{
                message: 'First Menu'
            },
            {
                message: 'Second Menu'
            }
        ]
    },
    {
        label: "Settings",
        items: [{
                message: 'First Setting Menu'
            },
            {
                message: 'Second Setting Menu'
            }
        ]
    }
]

You could build your template this way:

<b-menu v-for="menu in menu_items" v-bind:key="menu.label">
    <label>{{ menu.label }}</label>
    <b-menu-list v-for="item in menu.items" v-bind:key="item">
        <b-menu-item> {{ item.message }}</b-menu-item>
    </b-menu-list>
</b-menu>