0👍
You are passing the props as :main-link-groups
and main-link-groups-two
but trying to access them as mainLinkGroups
and mainLinkGroupsTwo
respectively inside ToolsMenu
component,
Do the below change and it might work
<tools-menu ref="toolsMenu" :mainLinkGroups="mainLinkGroups"/>
<tools-menu ref="toolsMenu" :mainLinkGroupsTwo="mainLinkGroupsTwo"/>
[Edited]
The braces are not correctly closed
computed: {
mainLinkGroups() {
return [
{
header: 'HeaderOne',
icon: icons.HOME,
links: [
{
icon: 'fas fa-copy',
text: 'Foo',
area: 'ONE'
}
]
} // Added Object closing
] // Added Array closing
},
mainLinkGroupsTwo() {
return [
{
header: 'HeaderTwo',
links: [
{
to: '/home',
icon: 'fas fa-home',
text: 'home',
area: 'TWO'
},
]
}
] // Added Array closing
},
Also handle the empty array condition in the below code just in case
filteredLinkGroups() {
if(!this.mainLinkGroups || (this.mainLinkGroups && !this.mainLinkGroups.length)) {
return [];
}
return this.mainLinkGroups.map(linkGroup => ({header: linkGroup.header, links: linkGroup.links.filter(item => {
const userAreaPermission = this.userAreaPermissionMap[item.area];
return !item.area || userAreaPermission &&
(item.modal ? userAreaPermission === 'FULL_CONTROL' : userAreaPermission !== 'NOT_ALLOWED');
})}));
},
filteredLinkGroupsTwo() {
if(!this.mainLinkGroupsTwo || (this.mainLinkGroupsTwo && !this.mainLinkGroupsTwo.length)) {
return [];
}
return this.mainLinkGroupsTwo.map(linkGroup => ({header: linkGroup.header, links: linkGroup.links.filter(item => {
const userAreaPermission = this.userAreaPermissionMap[item.area];
return !item.area || userAreaPermission &&
(item.modal ? userAreaPermission === 'FULL_CONTROL' : userAreaPermission !== 'NOT_ALLOWED');
})}));
},
- [Vuejs]-How can I combine these two scripts into one in vue?
- [Vuejs]-Django Rest Framework – Why am I getting a CSRF cookie not set on only one URL when there is NO difference from the other forms
Source:stackexchange.com