vue递归组件问题

Question

导航栏递归组件报错
<template>

<el-submenu v-if="item.child && item.child.length" :index="navIndex"> 
    <!-- 创建父级菜单 -->
    <template slot="title"><i v-if="item.icon" class="item.icon"></i>{{ item.name }}</template>
    <!-- 创建子菜单 -->
    <nav-bar-item v-for="(subItem,i) in item.child" :key="navIndex+'-'+i" :navIndex="navIndex+'-'+i" :item="subItem" ></nav-bar-item>
</el-submenu>
<el-menu-item v-else :index="item" :route="{path: item.url}" ><i v-if="item.icon" class="item.icon"></i>{{ item.name }}</el-menu-item>

</template>

<script>
export default {

name: 'NavBarItem',
props: ['item','navIndex']

}
</script>

在父组件中调用
<nav-bar-item v-for="(item, index) in navList" :item="item" :navIndex="String(index)" ></nav-bar-item>
然后一直报错

Answer 1

Answer 2

1. String()定义了没
2. navList获取到值了没
3. props建议用对象语法,提供校验 文档