如何在Vue.js中循环？

Question

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

Answer 1

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.

Answer 2

I'm not sure how you want to format your data, but you should probably change your data structure.

This is an example that might help you out though:

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

https://jsfiddle.net/5tLxdxds/

Answer 3

Here's my solution if you want to pass label directly from data

var App = new Vue({
el: '#app',

data: {

        label1='General',
        label2='Settings',

        menu_items: [
                        { 
                            items:[
                                    {
                                        message:'first menu'
                                    },
                                    {
                                        message:'second menu'
                                    }
                                  ]
                            label = this.label1;
                        },

                        { 
                            items:[
                                    {
                                        message:'first Settings menu'
                                    },
                                    {
                                        message:'second Settings menu'
                                    }
                                  ]
                            label = this.label2;
                        },
                    ]
      }
    });

Now To render it in html code :

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

This is alternate solution if you want to pass your particular label name as data else anywhere

Hope you got perfect help!