Vue.js 如何使用Quasar QexpansionItem创建递归菜单

我想使用Quasar框架中的QExpansionItem创建一个组件，该组件可以通过嵌套对象结构进行缩放

我制作了一个递归组件来尝试实现这一点，但没有像我希望的那样显示。这些项目以错误的方式重复，我不知道为什么

我使用的是Quasar V1.0.5，我使用的组件QexpansionItem

这里是菜单对象

[
{
名称：“1”，
图标：“设置”，
权限：'配置'，
说明：“1”，
url:“”，
儿童：[
{
名称：“1.1”，
权限：'配置'，
url:“/insuranceTypes”，
图标：“添加”，
说明：“1.1”
},
{
名称：“1.2”，
权限：'配置'，
url:“/insuranceTypes2”，
图标：“手机”，
说明：“1.2”
}
]
}, {
名称：‘2’，
图标：“人”，
权限：'配置'，
url:'联系人'，
描述：“2”
}
]

MenuComponent.vue，我在其中调用侧树菜单组件

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

      </q-list>

    <script>
export default {
  name: 'EssentialLink',
  props: {
    title: {
      type: String,
      required: true
    },

    caption: {
      type: String,
      default: ''
    },

    link: {
      type: String,
      default: '#'
    },

    icon: {
      type: String,
      default: ''
    },

    level: {
      type: String,
      default: ''
    },

    children: []
  }
}
</script>

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>

从“vuex”导入{mapGetters}
导出默认值{
名称：'边'，
道具：[“菜单”，“儿童”]，
数据（）{
返回{
伊索彭：错，
算法：0
}
},
挂载（）{
console.log（'menu'，this.menu）
},
计算：{
…地图绘制者（'generals'，['can']））
}
}

---

元素1.1和1.2重复出现，我不知道如何修复它

我遇到了相同的问题，没有在线找到任何解决方案。我设法用下面的方法使它工作。这可能对将来的人有所帮助：）

我在这里添加了两个最重要的代码文件，它们将使这项工作正常进行。剩下的设置只不过是通过quasar create[project name]CLI命令创建的

使用上述命令创建项目时，将获得MainLayout.vue和essentialink.vue文件。我已经修改了这些，以达到所需的结果

**My MainLayout.vue文件-模板**

EssentialLink下面是组件，该组件使用主布局页面抽屉中的q-expansion-item递归呈现菜单

<template>
  <q-layout view="hHh Lpr lFf">
    <q-header elevated>
       <q-toolbar>
        <q-btn flat dense round icon="menu" aria-label="Menu"  
          @click="leftDrawerOpen = !leftDrawerOpen" />
        <q-toolbar-title>
          {{appTitle}}
        </q-toolbar-title>
        <div>Release {{ appVersion }}</div>
      </q-toolbar>
    </q-header>
    <q-drawer
      v-model="leftDrawerOpen" show-if-above bordered
      content-class="bg-grey-1">
      <q-list>
        <q-item-label
          header
          class="text-grey-8">
          Essential Links
        </q-item-label>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link">
        </EssentialLink>
      </q-list>
    </q-drawer>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

{{appTitle}}
发布{{appVersion}
基本环节

MainLayout.vue文件的script部分。要注意的关键属性-子级和级别

<script>

import EssentialLink from 'components/EssentialLink.vue'

export default {
  name: 'MainLayout',

  components: {
    EssentialLink
  },

  data () {
    return {
      appTitle: 'Project Name',appVersion: 'v0.1',leftDrawerOpen: false,
      essentialLinks: [
        {
          title: 'Search', caption: 'quasar.dev', icon: 'school',
          link: 'https://quasar.dev', 
          level: 0,
          children: [{
            title: 'Documents', caption: 'quasar.dev',icon: 'school',
            link: 'https://quasar.dev',
            level: 1, 
            children: [{
              title: 'Search (level 3)',
              caption: 'quasar.dev',
              icon: 'school',
              link: 'https://quasar.dev',
              level: 2,
              children: []
            }]
          }]
        },
        {
          title: 'Github',caption: 'github.com/quasarframework',
          icon: 'code',link: 'https://github.com/quasarframework',
          level: 0,
          children: [{
            title: 'Github Level 2',caption: 'quasar.dev',icon: 'school',
            link: 'https://quasar.dev',level: 1,
            children: []
          }]
        },
        {
          title: 'Forum',caption: 'forum.quasar.dev',
          icon: 'record_voice_over',link: 'https://forum.quasar.dev',
          level: 0,
          children: [{
            title: 'Forum Level 2',caption: 'quasar.dev',icon: 'school',
            link: 'https://quasar.dev',
            level: 1,
            children: []
          }]
        }
      ]
    }
  }
}
</script>

从“components/essentialink.vue”导入EssentialAlink
导出默认值{
名称：'主布局'，
组成部分：{
Essentialink
},
数据（）{
返回{
appTitle:“项目名称”，appVersion:“v0.1”，leftDrawerOpen:false，
基本要素：[
{
标题：“搜索”，标题：“quasar.dev”，图标：“学校”，
链接：'https://quasar.dev', 
级别：0，
儿童：[{
标题：“文档”，标题：“quasar.dev”，图标：“学校”，
链接：'https://quasar.dev',
级别：1，
儿童：[{
标题：“搜索（三级）”，
描述：“quasar.dev”，
图标：“学校”，
链接：'https://quasar.dev',
级别：2，
儿童：[]
}]
}]
},
{
标题：“Github”，标题：“Github.com/quasarframework”，
图标：“代码”，链接：'https://github.com/quasarframework',
级别：0，
儿童：[{
标题：“Github 2级”，标题：“quasar.dev”，图标：“学校”，
链接：'https://quasar.dev，级别：1，
儿童：[]
}]
},
{
标题：“论坛”，标题：“论坛.类星体.开发”，
图标：“录制声音”，链接：'https://forum.quasar.dev',
级别：0，
儿童：[{
标题：“论坛2级”，标题：“quasar.dev”，图标：“学校”，
链接：'https://quasar.dev',
级别：1，
儿童：[]
}]
}
]
}
}
}

最后是Essentialink.vue组件

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

      </q-list>

    <script>
export default {
  name: 'EssentialLink',
  props: {
    title: {
      type: String,
      required: true
    },

    caption: {
      type: String,
      default: ''
    },

    link: {
      type: String,
      default: '#'
    },

    icon: {
      type: String,
      default: ''
    },

    level: {
      type: String,
      default: ''
    },

    children: []
  }
}
</script>

下面的代码在其子属性中遇到多个项时会递归地调用自身。“级别”属性用于在向下搜索时缩进菜单

    <template>
  <div>
    <div v-if="children.length == 0">
      <q-item clickable v-ripple :inset-level="level">
        <q-item-section>{{title}}</q-item-section>
      </q-item>
    </div>
    <div v-else>
      <div v-if="children.length > 0">
        <!-- {{children}} -->
        <q-expansion-item
            expand-separator
            icon="mail"
            :label="title"
            :caption="caption"
            :header-inset-level="level"
            default-closed>
          <EssentialLink
            v-for="child in children"
            :key="child"
            v-bind="child">
          </EssentialLink>
        </q-expansion-item>
      </div>
      <div v-else>
        <q-item clickable v-ripple :inset-level="level">
          <q-item-section>{{title}}</q-item-section>
        </q-item>
      </div>
    </div>
  </div>
</template>

{{title}}
{{title}}

*EssentialLink.vue组件的脚本部分

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

      </q-list>

    <script>
export default {
  name: 'EssentialLink',
  props: {
    title: {
      type: String,
      required: true
    },

    caption: {
      type: String,
      default: ''
    },

    link: {
      type: String,
      default: '#'
    },

    icon: {
      type: String,
      default: ''
    },

    level: {
      type: String,
      default: ''
    },

    children: []
  }
}
</script>

导出默认值{
名称：“Essentialink”，
道具：{
标题：{
类型：字符串，
必填项：true
},
标题：{
类型：字符串，
默认值：“”
},
链接：{
类型：字符串，
默认值：'#'
},
图标：{
类型：字符串，
默认值：“”
},
级别：{
类型：字符串，
默认值：“”
},
儿童：[]
}
}

---

最终输出如图所示

谢谢我的朋友！惊人的答案！愿上帝保佑你