Recursive expansion-item menu.

[iamyohanarias]

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

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

Can anybody help me please?