v-for循环遍历

数据结构如下:
tableData:[

              {"审核管理":[    {title:"头像审核",url:"userList"},
                              {title:"动态审核管理",url:"userActivity"},
                              {title:"评论审核管理",url:"comment"},
                              {title:"举报管理",url:"reportRecord"},
                              {title:"用户认证管理",url:"authentication"},
                              {title:"相册审核管理",url:"album"},
                              {title:"积分提现管理",url:"getCash"},
                              {title:"APP内容监控-花间",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}}(这里循环的结果应该是“审核管理”,“用户管理”)
</template>
<el-menu-item v-for="(a,b) in v" index="user">{{a}}(这里应该是以及菜单下的二级菜单)</el-menu-item>

</el-submenu>

阅读 8.9k
2 个回答

数据结构可以弄成这样
tableData:[

          {name:"审核管理",
                   list:[ {title:"头像审核",url:"userList"},
                          {title:"动态审核管理",url:"userActivity"},
                          {title:"评论审核管理",url:"comment"},
                          {title:"举报管理",url:"reportRecord"},
                          {title:"用户认证管理",url:"authentication"},
                          {title:"相册审核管理",url:"album"},
                          {title:"积分提现管理",url:"getCash"},
                          {title:"APP内容监控-花间",url:"monitor"}  ]},
          {name:"用户管理",
                  list:[  {title:"用户管理",url:"user"},
                          {title:"用户管理编辑",url:"vest"}  ]},

      ]

你这样定义data肯定有问题的

第一次循环肯定是
第一行
{ "审核管理": [ { "title": "头像审核", "url": "userList" }, { "title": "动态审核管理", "url": "userActivity" }, { "title": "评论审核管理", "url": "comment" }, { "title": "举报管理", "url": "reportRecord" }, { "title": "用户认证管理", "url": "authentication" }, { "title": "相册审核管理", "url": "album" }, { "title": "积分提现管理", "url": "getCash" }, { "title": "APP内容监控-花间", "url": "monitor" } ] }

第二行
{ "用户管理": [ { "title": "用户管理", "url": "user" }, { "title": "用户管理编辑", "url": "vest" } ] }

他v-for 是对于每个元素的值 而不是某个元素key 或者说第一个元素这样
所以这样定义数据肯定 有问题
你可以data:{{key:1,val:[]},key:2,val2:[]},{key:1,val:[]}} 这样data格式

然后v-for = (d,index) in data 然后想输出 data[index]。key 这是第一个 然后输出 对应的 data[index].val2 index 省略不写 是说明这个意思

推荐问题