[Vue warn]: Invalid prop: type check failed for prop “index“. Expected String with value “0“, got Nu

错误描述

• 今天在使用vue 和element UI做循环遍历的时候遇到了如下问题：

[Vue warn]: Invalid prop: type check failed for prop "index". Expected String with value "0", got Number with value 0.

• 百度翻译结果如下：

[Vue warn]：属性无效：属性“index”的类型检查失败。应为值为“0”的字符串，而值为0的数字。

• 我的代码如下：

<el-submenu v-for="(item,index) in menus" :index="index" :key="index">

解决方式

其实很简单，因为我们给 index赋的是数字，但它需要的是字符串，那么vue的单向绑定是支持js表达式的，咱们直接拼接一个字符串即可：

<el-submenu v-for="(item,index) in menus" :index="index+''" :key="index">