递归无限级菜单出现问题,出到第二级,第三级出不来,应该是递归错了,但找不到问题,请指教

slideritem.vue(子组件)

clipboard.png

Home.vue(父)

clipboard.png

clipboard.png
就是会出现只要两级的点击可以下拉,三级的点击了下拉没反应

clipboard.png
模板没有渲染是什么意思啊,我的template渲染不了?

阅读 4.4k
1 个回答

代码不完整,看不出来.
就目前已知的代码是menulist是空的,所以渲染时肯定是没东西的.
另外wl-submenu不知道是组件内运行逻辑就不说了.
你这递归逻辑肯定是有问题的.
el-menu应该是在导航父组件中建立.因为它是属于导航的根.
至于整体导航递归逻辑之前跟你解释过了.
最后再给个建议,写代码格式很重要.template一眼看过去都看不清楚.

怕你对我讲的父子组件关系产生误解.我再解释下.
整个递归导航组件由两部分组件.
menu.vue 它相当于导航的入口,也就是上文里我讲的[父组件]就是它.
它负责建立el-menu根导航,循环数据的第一层,把数据传递给子组件
sub-menu.vue 这是上文我讲的[子组件].
通过父组件传递进来的数据进行逻辑处理,1:有子集递归.2:没有子集使用el-menu-item

在需要调用无限导航的地方引用menu.vue就可以了,


<template>
  <el-submenu :index="data.url" v-if="data.item !== null">
    <template slot="title"><span>{{data.name}}</span></template>
    <template v-for="obj in data.item">
      <sub-menu :data="obj"></sub-menu>
    </template>
  </el-submenu>
  <el-menu-item :index="data.url" v-else>{{data.name}}</el-menu-item>
</template>

对比下第二行,看下你写的逻辑是否通畅.
你报错的地方是指你第9行的模板.原因是上面引起.


我不清楚你栏目数据结构是怎么样的,现在只能通过你代码猜测.data是个对象,data.children是个对象数组.
你子组件是接收1个对象数据data.
你第二行只是判断是否显示?你自己假设数据心算下不就明白啦么
第九行直接循环的是对象子集(数组),
问题1:那要是没子集会发生什么?
问题2:有子集,你把子集数组递归,可你接收的数据明明是单个对象.
逻辑上你明白出什么问题了吗?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题