在vue表单渲染渲染数显示Invalid prop: custom validator check failed for prop “index“.

报错代码

<el-menu
  default-active="2"
  class="el-menu-vertical-demo"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
  router
  :collapse="isCollapse"
  :collapse-transition="false"
  >
  <el-submenu
    v-for="item in menusList"
    :key="item.id"
    :index="item.id"  //报错
    >
    <template slot="title">
      <i :class="icondata[item.id]"></i>
      <span>{{ item.authName }}</span>
    </template>
    <el-menu-item-group v-for="ited in item.children" :key="ited.id">
      <el-menu-item :index="ited.id">//报错
        {{ ited.authName}}
      </el-menu-item>
    </el-menu-item-group>
  </el-submenu>
</el-menu>

报错截图

原因分析

Element-UI 官网的导航菜单模块要求index的值是string或者是null，而我传入的 item.id / ited.id 是数字类型的，所以报错

解决方法

将item.id转化成字符串类型：
方法一：String(item.id)
方法二：item.id.toString
方法三：item.id+‘’