el-submenu 报错 [Vue warn]: Expected String, got Number.

weixin_33779515

于 2018-12-09 07:08:11 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000017311431

本文详细介绍了在使用Vue与ElementUI框架进行项目开发时，遇到的侧边导航栏中el-submenu组件index属性类型错误的问题。通过简单的代码修改，即将数字类型的索引转换为字符串类型，成功解决了这一常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-submenu v-for="(item, index) in navBarData" :index="index" :key="index">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>{{item.navName}} : {{index}}</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="1-1">选项1</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-2">
      <template slot="title">选项2</template>
      <el-menu-item index="1-2-1">选项1</el-menu-item>
    </el-submenu>
</el-submenu>

在使用vue开发项目，elementUI作为框架。使用el-submenu处理侧边导航栏时，出现错误提示：[Vue warn]: Invalid prop: type check failed for prop "index". Expected String, got Number.

报错原因：按照字面意思上理解，期望一个字符串，但是获得的是一个数字。
处理方案：:index="index" 改成 :index="index+''"；数字转化成字符串。