Return multi-level menu drawer navigation items based on permissions

Question

Function doesn't return particular item, instead of it returns whole group where the given item exists.

In given codepen example: https://codepen.io/simon.network/pen/YzvgVBa?editors=1011

user has permissions:

userPermissionGroup: [
        "dictionary_company_high_department",
        "dictionary_company_department",
        "user_user"
      ]

And menu returns entire groups in the menu where items with those permissions exists instead of just three items in two groups

Answer 1

Working solution in the codepen: https://codepen.io/simon.network/pen/YzvgVBa?editors=0111

Basically I can use computed properties in Vue stacked together, so I created two computed properties: filterSubItems(subItems) for menu search and filterSubItemsByPermissions(subItems) for menu permissions.

<v-list-item
    v-for="child in filterSubItems(filterSubItemsByPermissions(item.items))"
    :key="child.title"
    :to="child.link"
    dense
    link
    >
    <v-list-item-content>
      <v-list-item-title>{{ child.title }}</v-list-item-title>
    </v-list-item-content>
</v-list-item>