How to loop in 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

Your formatting for menu_items is entirely wrong.

Stephan-v
– Stephan-v

2017-07-29 17:47:42 +00:00
Commented Jul 29, 2017 at 17:47 — Stephan-v
– Stephan-v, Commented Jul 29, 2017 at 17:47

Bert · Accepted Answer · 2017-07-29 17:48:26Z

3

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.

answered Jul 29, 2017 at 17:48

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

YVS1102 Over a year ago

thanks, it's working. When i'm not using v-bind:data i get this component lists rendered with v-for should have explicit keys last time i check i get that. But now i don't see that message on the console.

Bert Over a year ago

@YVS1102 v-bind:key is what the message means. Basically each item in a loop for a custom component needs a unique key value.

YVS1102 Over a year ago

oh ok. I think i need to re-read list rendering. thank you once again

Stephan-v · Accepted Answer · 2017-07-29 17:51:22Z

1

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/

answered Jul 29, 2017 at 17:51

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

Comments

Meet Zaveri · Accepted Answer · 2017-07-30 05:46:34Z

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!

Collectives™ on Stack Overflow

How to loop in Vue.js?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related