vue2+elementUI 无限导航递归报错

Question

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

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

报错:

Answer 1

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

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

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

Answer 2

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

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>

2.[HMR] bundle has 1 warnings 报错
启发出处
好像是文件名造成的冲突,我把sub-menu.vue 改成别的名字就好了.

Answer 3

index 在部分遍历的情况下为空