How to loop in Vue.js?

debugcn Published at Dev

YVS1102

I'm trying to create a menu with vue.js, but my menu isn't showing up. Here is what I have tried:

<div id="app" class="container">
    <b-menu v-for="menu in menu_items" v-bind:data="menu.menu_list" v-bind:key="menu.menu_list">
        <label>{{ menu.menu_list }} </label>
            <b-menu-list v-for="menu_item in menu_items.menu_list" v-bind:data="menu_item" v-bind:key="menu_item.message">
                <b-menu-item  > {{ menu.message }}</b-menu-item>
            </b-menu-list>
    </b-menu>
</div>

And here is my Vue.js code:

var App = new Vue({
    el: '#app',
    data: {
     menu_items: [{
            menu_list : 'General' [
                    { message: 'First Menu' },
                    { message: 'Second Menu' }
                ],
            menu_list : 'Setting' [
                { message: 'First Setting Menu' },
                { message: 'Second Setting Menu' }
            ]
        }]
    }
})

Any solution(s)?

What i want to achieve

 - General
    - First Menu
    - Second Menu
 - Setting
    - First setting Menu
    - Second setting Menu

Bert

I'd suggest an alternate data structure.

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

In the above structure, each menu is an object that has a label and a list of menu items.

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

I took out the v-bind:data properties. I'm not sure what they are for.

Collected from the Internet

Please contact [email protected] to delete if infringement.