Recursive expansion-item menu.



  • I want create a component that it can to scale with a nested object structure.

    menu.json

    [
    {
        name: '1',
        icon: 'settings',
        permission: 'configuration',
        description: '1',
        url: '',
        children: [
          {
            name: '1.1',
            permission: 'configuration',
            url: '/insuranceTypes',
            icon: 'add',
            description: '1.1'
          },
          {
            name: '1.2',
            permission: 'configuration',
            url: '/insuranceTypes2',
            icon: 'phone',
            description: '1.2'
          }
        ]
      }, {
        name: '2',
        icon: 'person',
        permission: 'configuration',
        url: 'contacts',
        description: '2'
      }
      ]
    

    MenuComponent.vue where i call side-tree-menu component

    <q-scroll-area class="fit">
          <q-list
            bordered
            class="rounded-borders q-pt-md"
          >
            <side-tree-menu :menu="menu"></side-tree-menu>
    
          </q-list>
    

    SideTreeMenuComponent.vue

    <template>
      <div>
    
        <q-expansion-item
          expand-separator
          :icon="item.icon"
          :label="item.name"
          :caption="item.description"
          header-class="text-primary"
          :key="item.name"
          :to="item.url"
          v-for="(item) in menu"
        >
    
          <template>
            <side
              v-for="(subitem) in item.children"
              :key="subitem.name"
              :menu="item.children"
            >
            </side>
          </template>
    
        </q-expansion-item>
    
      </div>
    </template>
    
    <script>
    import { mapGetters } from 'vuex'
    export default {
      name: 'side',
      props: ['menu', 'children'],
      data () {
        return {
          isOpen: false,
          algo: 0
        }
      },
      mounted () {
        console.log('menu', this.menu)
      },
      computed: {
        ...mapGetters('generals', ['can'])
      }
    }
    </script>
    
    <style>
    </style>
    
    
    

    it shows the menu
    676e0349-4d4e-4c22-9315-02bfac74705b-image.png

    It’s repeating the elements 1.2 and 1.2 and i dont know why

    Can anybody help me please?


Log in to reply