【element-ui】vue2+elementUI 无限导航递归报错

Z时代
2024-01-10
分类：技术分享

不知道哪个位置错了...很迷茫.

app.vue调用入口

<template>
  <el-row class="H100 window">
    <el-col :span="4" class="H100 menu">
      <left-menu :data="shuju"></left-menu><!-- <<<<<<<<<<<<<< 在这里 -->
    </el-col>
    <el-col :span="20" class="H100 main"></el-col>
  </el-row>
</template>
<script>
import leftMenu from '@/components/menu'
export default {
  name: 'app',
  data () {
    return {
      /* eslint-disable */
      shuju: [
        {name: '栏目1', icon: 'a', url: 'a1', item: [
          {name: '二级1', icon: 'a', url: 'b1', item: [
            {name: '三级1', icon: 'a', url: 'c1', item: null},
            {name: '三级2', icon: 'a', url: 'c2', item: null}
          ]},
          {name: '二级2', icon: 'a', url: 'b2', item: null},
          {name: '二级3', icon: 'a', url: 'b3', item: null}
        ]},
        {name: '栏目2', icon: 'a', url: 'a2', item: null},
        {name: '栏目3', icon: 'a', url: 'a3', item: null}
      ]
      /* eslint-enable */
    }
  },
  components: {leftMenu}
}</script>

menu.vue

<template>
  <el-menu default-active="1" :router="true" class="el-menu-vertical-demo">
    <template v-for="item in data">
      <sub-menu :data="item"></sub-menu>
    </template>
  </el-menu>
</template>
<script>
import subMenu from './sub-menu'
export default {
  props: ['data'],
  components: {subMenu}
}</script>

sub-menu.vue

<template>
  <el-submenu :index="data.url" v-if="data.item !== null">
    <span slot="title">{{data.name}}</span>
    <template v-for="obj in data.item">
      <sub-menu v-if="obj.item !== null" :data="obj.item"></sub-menu>
      <el-menu-item v-else :index="obj.url">{{obj.name}}</el-menu-item>
    </template>
  </el-submenu>
  <el-menu-item :index="data.url" v-else>{{data.name}}</el-menu-item>
</template>
<script>
import subMenu from './sub-menu'
export default {
  name: 'subMenu',
  props: ['data'],
  components: {subMenu}
}</script>

目录结构:

src/
|-- components/
|-- |-- menu.vue
|-- |-- sub-menu.vue|-- app.vue

报错:
图片描述

回答：

你的错误是因为参数错误传递导致的, 看错误信息, el-submenu组件有个index属性, 要求是String, 结果是undefined;

就是因为在循环是item有的是个数组, 有的是个对象。

所以item.url在数组的时候为undefined;

回答：

问题解决了,但原因不还知道.

1.递归错误解决办法

<template>
  <el-submenu :index="data.winProperty" 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.winProperty" v-else>{{data.name}}</el-menu-item>
</template>
<script>
import subMenu from './item-menu'
export default {
  name: 'subMenu',
  props: ['data'],
  components: {subMenu}
}</script>