在Vue.js中从json结果制作多维数组
我有这个查询
$menus = Menu::whereStatus(1)
->paginate(50)
结果：
{
"current_page": 1,
"data": [{
"id": 5,
"route_name": "student-list",
"parent_id": 41,
"position": 0,
"status": 1,
"is_displayable": 1,
"site_id": 1,
"deleted_at": null,
"icon_name": "fa fa-bandcamp",
"is_common_access": 0,
"menu_name": "Students",
"translations": [{
"id": 5,
"menu_id": 5,
"menu_name": "Students",
"locale": "en",
"site_id": 1
}
]
}, {
"id": 6,
"route_name": "log-out",
"parent_id": 0,
"position": 0,
"status": 1,
"is_displayable": 0,
"site_id": 1,
"deleted_at": null,
"icon_name": "",
"is_common_access": 1,
"menu_name": "Sign Out",
"translations": [{
"id": 6,
"menu_id": 6,
"menu_name": "Sign Out",
"locale": "en",
"site_id": 1
}
]
}, {
"id": 7,
"route_name": "sign-in",
"parent_id": 0,
"position": 0,
"status": 1,
"is_displayable": 0,
"site_id": 1,
"deleted_at": null,
"icon_name": "",
"is_common_access": 1,
"menu_name": "Sign In",
"translations": [{
"id": 7,
"menu_id": 7,
"menu_name": "Sign In",
"locale": "en",
"site_id": 1
}
]
}, {
"id": 8,
"route_name": "sign-in-form",
"parent_id": 0,
"position": 0,
"status": 1,
"is_displayable": 0,
"site_id": 1,
"deleted_at": null,
"icon_name": "",
"is_common_access": 1,
"menu_name": "Sign In Form",
"translations": [{
"id": 8,
"menu_id": 8,
"menu_name": "Sign In Form",
"locale": "en",
"site_id": 1
}
]
}, {
"id": 9,
"route_name": "log-in",
"parent_id": 0,
"position": 0,
"status": 1,
"is_displayable": 0,
"site_id": 1,
"deleted_at": null,
"icon_name": "",
"is_common_access": 1,
"menu_name": "Log In",
"translations": [{
"id": 9,
"menu_id": 9,
"menu_name": "Log In",
"locale": "en",
"site_id": 1
}
]
}, {
"id": 10,
"route_name": "role-check",
"parent_id": 0,
"position": 0,
"status": 1,
"is_displayable": 0,
"site_id": 1,
"deleted_at": null,
"icon_name": "",
"is_common_access": 1,
"menu_name": "Role Check",
"translations": [{
"id": 10,
"menu_id": 10,
"menu_name": "Role Check",
"locale": "en",
"site_id": 1
}
]
}, {
"id": 12,
"route_name": "login-form",
"parent_id": 0,
"position": 0,
"status": 1,
"is_displayable": 0,
"site_id": 1,
"deleted_at": null,
"icon_name": "",
"is_common_access": 1,
"menu_name": "First Sign In",
"translations": [{
"id": 12,
"menu_id": 12,
"menu_name": "First Sign In",
"locale": "en",
"site_id": 1
}
]
}, {
"id": 13,
"route_name": "admin",
"parent_id": 0,
"position": 0,
"status": 1,
"is_displayable": 1,
"site_id": 1,
"deleted_at": null,
"icon_name": "fa fa-tachometer",
"is_common_access": 1,
"menu_name": "Dashboard",
"translations": [{
"id": 13,
"menu_id": 13,
"menu_name": "Dashboard",
"locale": "en",
"site_id": 1
}, {
"id": 563,
"menu_id": 13,
"menu_name": "dgdfgdfgdf",
"locale": "fr",
"site_id": 1
}
]
}, {
"id": 14,
"route_name": "employee-profile",
"parent_id": 0,
"position": 0,
"status": 1,
"is_displayable": 0,
"site_id": 1,
"deleted_at": null,
"icon_name": "",
"is_common_access": 1,
"menu_name": "Profile",
"translations": [{
"id": 14,
"menu_id": 14,
"menu_name": "Profile",
"locale": "en",
"site_id": 1
}
]
}, {
"id": 15,
"route_name": "choose-lang",
"parent_id": 0,
"position": 0,
"status": 1,
"is_displayable": 0,
"site_id": 1,
"deleted_at": null,
"icon_name": "",
"is_common_access": 1,
"menu_name": "Language Chooser",
"translations": [{
"id": 15,
"menu_id": 15,
"menu_name": "Language Chooser",
"locale": "en",
"site_id": 1
}
]
}
],
"first_page_url": "http:\/\/eduworld.test\/api\/sub-module\/get-menu-list?page=1",
"from": 1,
"last_page": 63,
"last_page_url": "http:\/\/eduworld.test\/api\/sub-module\/get-menu-list?page=63",
"next_page_url": "http:\/\/eduworld.test\/api\/sub-module\/get-menu-list?page=2",
"path": "http:\/\/eduworld.test\/api\/sub-module\/get-menu-list",
"per_page": 10,
"prev_page_url": null,
"to": 10,
"total": 628
}
我尝试过：
<div
class="col-md-3"
style="padding: 5px;"
v-for="item in menus.data"
v-bind:key="item.id">
<div
class="col-md-12"
style="border: 3px solid cornflowerblue; padding: 5px; background-color: whitesmoke;">
<input type="checkbox" checked :value="item.id" v-model="selectedMenus">
<span class="checkbox-label">{{item.menu_name}}</span>
</div>
</div>
<br>
说明：我使用了dimsav翻译包。这就是route_name在另一个数组中的原因。
请查看parent_id列。并非所有菜单链接都具有parent_id值。我要显示父菜单，然后显示该父菜单中的子菜单（请参见图片）。
。
我该如何在客户端执行此操作？你能帮我吗？ 我不知道如何使用jsfiddle或plunkr，否则我可以做那些。 明智的话，请您这样做。这就是为什么我给出完整的json。
已编辑
我是在刀片文件中完成的
Menu $menuModel
$menus=$menuModel->where('parent_id', 0)->get();
@if(isset($menus) && !$menus->isEmpty())
@foreach($menus as $menu)
<div class="col-md-4" style="padding: 5px; ">
<div class="col-md-12" style="border: 3px solid cornflowerblue; padding: 5px; background-color: whitesmoke;">
@php($displayedChildMenus=getChildMenus($menuModel,$menu->id))
@if(isset($displayedChildMenus) && count($displayedChildMenus) > 0)
<div class="col-md-12" style="border: 1px solid blue; background-color: cornflowerblue; opacity:0.8; color: white;">
<input title="" type="checkbox" @if(in_array($menu->id,$getGroupAccess)) checked="checked" @endif class="check-common-class check-common-viewclass" id={{ 'view'.'_'.$menu->id }} data-type='view' data-role-id={{ $groupId }} data-menu-id={{ $menu->id }}>
{{ $menu->id }} {{ $menu->menu_name }}
</div>
@foreach($displayedChildMenus as $displayedchildMenu)
@php($displayedSubChildMenus=getChildMenus($menuModel,$displayedchildMenu->id))
@if(isset($displayedSubChildMenus) && count($displayedSubChildMenus) > 0)
<div class="col-md-12" style="border: 2px solid Green ;padding:0;background-color: MintCream ; opacity:0.8; ">
<div class="col-md-12" style="background-color: cornflowerblue ;color: white; ">
<input title="" type="checkbox" @if(in_array($displayedchildMenu->id,$getGroupAccess)) checked="checked" @endif class="check-common-class check-common-viewclass" data-menu-id={{ $displayedchildMenu->id }}>
{{ $displayedchildMenu->id }} {{ $displayedchildMenu->menu_name }}
</div>
@foreach($displayedSubChildMenus as $displayedSubChildMenu)
<div class="col-md-12" style=" padding:0 25px; ">
<input title="" type="checkbox" @if(in_array($displayedSubChildMenu->id,$getGroupAccess)) checked="checked" @endif class="check-common-class check-common-viewclass" data-menu-id={{ $displayedSubChildMenu->id }}>
{{ $displayedSubChildMenu->id }} {{ $displayedSubChildMenu->menu_name }}
</div>
@endforeach
</div>
@else {{--$displayedSubChildMenus--}}
<div class="col-md-12">
<input title="" type="checkbox" @if(in_array($displayedchildMenu->id,$getGroupAccess)) checked="checked" @endif class="check-common-class check-common-viewclass" id={{ 'view'.'_'.$menu->id }} data-type='view' data-role-id={{ $groupId }} data-menu-id={{ $displayedchildMenu->id }}>
{{ $displayedchildMenu->id }} {{ $displayedchildMenu->menu_name }}
</div>
@endif
@endforeach
@else {{--$displayedChildMenus--}}
<div class="col-md-12" style="border: 1px solid blue; background-color: cornflowerblue; opacity:0.8; color: white;">
<input title="" type="checkbox" @if(in_array($menu->id,$getGroupAccess)) checked="checked" @endif class="check-common-class check-common-viewclass" id={{ 'view'.'_'.$menu->id }} data-type='view' data-role-id={{ $groupId }} data-menu-id={{ $menu->id }}>
{{ $menu->id }} {{ $menu->menu_name }}
</div>
@endif
</div>
</div>
@endforeach
@endif
1 个答案:
答案 0 :(得分：0)
如果我对您的理解正确，您正在尝试将所有菜单分组在各自的parent_id下，以便您v-for在该组上方并显示不同的部分。
如果是这种情况，则可以使用computed属性来计算二维数组：
computed: {
groups() {
return this.data.reduce((groups, item) => {
const g = item.parent_id
groups[g] = groups[g] || []
groups[g].push(item)
return groups
}, {})
}
}
然后呈现
<div v-for="parent in groups" ...>
<div v-for="child in parent" ...>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？