v-for循環(huán)遍歷

數(shù)據(jù)結(jié)構(gòu)如下：
tableData:[

              {"審核管理":[    {title:"頭像審核",url:"userList"},
                              {title:"動(dòng)態(tài)審核管理",url:"userActivity"},
                              {title:"評(píng)論審核管理",url:"comment"},
                              {title:"舉報(bào)管理",url:"reportRecord"},
                              {title:"用戶認(rèn)證管理",url:"authentication"},
                              {title:"相冊(cè)審核管理",url:"album"},
                              {title:"積分提現(xiàn)管理",url:"getCash"},
                              {title:"APP內(nèi)容監(jiān)控-花間",url:"monitor"}  ]},


              {"用戶管理":[  {title:"用戶管理",url:"user"},
                              {title:"用戶管理編輯",url:"vest"}  ]},

          ]

HTML部分如下：

<el-submenu v-for=" (v,i) in tableData" :key="i" :index="2+i">

<template v-for="(val,key) in v" slot="title">
    <i class="el-icon-document"></i>
    {{key}}(這里循環(huán)的結(jié)果應(yīng)該是“審核管理”，“用戶管理”)
</template>
<el-menu-item v-for="(a,b) in v" index="user">{{a}}（這里應(yīng)該是以及菜單下的二級(jí)菜單）</el-menu-item>

</el-submenu>

回答

編輯回答

離觴

你這樣定義data肯定有問題的

第一次循環(huán)肯定是
第一行
{ "審核管理": [ { "title": "頭像審核", "url": "userList" }, { "title": "動(dòng)態(tài)審核管理", "url": "userActivity" }, { "title": "評(píng)論審核管理", "url": "comment" }, { "title": "舉報(bào)管理", "url": "reportRecord" }, { "title": "用戶認(rèn)證管理", "url": "authentication" }, { "title": "相冊(cè)審核管理", "url": "album" }, { "title": "積分提現(xiàn)管理", "url": "getCash" }, { "title": "APP內(nèi)容監(jiān)控-花間", "url": "monitor" } ] }

第二行
{ "用戶管理": [ { "title": "用戶管理", "url": "user" }, { "title": "用戶管理編輯", "url": "vest" } ] }

他v-for 是對(duì)于每個(gè)元素的值而不是某個(gè)元素key 或者說第一個(gè)元素這樣
所以這樣定義數(shù)據(jù)肯定有問題
你可以data：{{key:1,val:[]},key:2,val2:[]},{key:1,val:[]}} 這樣data格式

然后v-for = （d，index） in data 然后想輸出 data[index]。key 這是第一個(gè) 然后輸出對(duì)應(yīng)的 data[index].val2 index 省略不寫是說明這個(gè)意思

2017年9月16日 17:40

編輯回答

懶洋洋

數(shù)據(jù)結(jié)構(gòu)可以弄成這樣
tableData:[

          {name:"審核管理",
                   list:[ {title:"頭像審核",url:"userList"},
                          {title:"動(dòng)態(tài)審核管理",url:"userActivity"},
                          {title:"評(píng)論審核管理",url:"comment"},
                          {title:"舉報(bào)管理",url:"reportRecord"},
                          {title:"用戶認(rèn)證管理",url:"authentication"},
                          {title:"相冊(cè)審核管理",url:"album"},
                          {title:"積分提現(xiàn)管理",url:"getCash"},
                          {title:"APP內(nèi)容監(jiān)控-花間",url:"monitor"}  ]},
          {name:"用戶管理",
                  list:[  {title:"用戶管理",url:"user"},
                          {title:"用戶管理編輯",url:"vest"}  ]},

      ]

2017年4月21日 04:45