Vue.jsでループするには？

Question

vue.jsでメニューを作成しようとしていますが、メニューが表示されません。ここで私が試したものです：

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' } 
      ] 
     }] 
    } 
}) 

どれ溶液（S）：

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

そして、ここでは私のVue.jsコードはありますか？

私は

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

Answer 1

を達成したい私は、代替データ構造をお勧めしたいです。

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

上記の構造では、各メニューは、ラベルとメニュー項目のリストを持つオブジェクトです。

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

私はv-bind:dataプロパティを取り出し：

次に、あなたのテンプレートこの方法を構築することができます。私は彼らが何のためであるか分からない。

Answer 2

どのようにデータを書式設定するのかはわかりませんが、おそらくデータ構造を変更する必要があります。

これはしかしあなたを助けるかもしれない例です。あなたはそれをレンダリングするには、データ今

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; 
         }, 
        ] 
     } 
    }); 

から直接ラベルを渡したい場合は

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

は、ここに私のソリューションですhtmlコード：

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

他の場所で特定のラベル名を他の場所に渡す場合は、これは別の解決方法です