[Vuejs]-Cannot read properties of undefined (reading 'map') when trying to display two arrays

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

Leave a comment