[Vue warn]: Invalid prop: type check failed for prop “index“.Expected String with value “145“...

-Yii

于 2022-02-24 22:21:08 发布

阅读量561

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/Youthenen/article/details/123065781

vue 专栏收录该内容

8 篇文章

订阅专栏

本文讲述了在使用Element Plus的el-menu组件时遇到警告的问题，通过将index属性从数值类型转换为字符串类型，解决了关于index接受限制的警告。重点在于理解el-menu组件对index属性的字符串要求并提供解决方案。

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

问题：在使用vue开发项目时，用到了element-plus的组件el-menu，其中一直报这个warn
在这里插入图片描述
这是请求回来的数据。

一开始：

  <el-sub-menu
      :index="item.id"
      v-for="(item, index) in menusList"
      :key="item.id"
  >
     <template #title>
        <el-icon>
          <!-- 通过这个方式引入icon图标组件 -->
          <component :is="iconList[index]"></component>
        </el-icon>
        <span>{{ item.authName }}</span>
      </template>
  </el-sub-menu>

修改后：
将el-sub-menu的index改为字符串类型，就没有那个warn

  <el-sub-menu
      :index="item.id+''"
      v-for="(item, index) in menusList"
      :key="item.id"
  >
     <template #title>
        <el-icon>
          <!-- 通过这个方式引入icon图标组件 -->
          <component :is="iconList[index]"></component>
        </el-icon>
        <span>{{ item.authName }}</span>
      </template>
  </el-sub-menu>