美文网首页
vue项目报错Invalid prop: type check

vue项目报错Invalid prop: type check

作者: 小呆糊总 | 来源:发表于2020-10-21 14:42 被阅读0次
在用vue做菜单时,控制台提示:

vue.esm.js:628 [Vue warn]: Invalid prop: type check failed for prop "index". Expected String with value "1", got Number with value 1.


image.png
解决方法::index="item.id+''"
<el-menu router 
  :default-active="$route.path" 
  :default-openeds="defaultActive" 
  @open="handleOpen" 
  @close="handleClose">
          <el-submenu 
           v-for="(item,index) in leftMenu" 
           :index="index+''" :key="index">
                  <template slot="title">
                    <span>{{item.menuname}}</span>
                  </template>
                  <div v-if="item.menuChildren && item.menuChildren.length != 0">
                    <el-menu-item 
                      v-for="(itemchild,indexchild) in item.menuChildren"  
                      :index="index+'-'+indexchild+''" :key="indexchild" 
                      @click="myHome(itemchild.menupath)">
                        {{item.menuname}}
                    </el-menu-item>
                  </div>
                  <div v-else>
                    <el-menu-item 
                      :index="index+'-1'+''" 
                      @click="myHome(item.menupath)">
                        {{item.menuname}}
                    </el-menu-item>
                  </div>
          </el-submenu>
</el-menu>
leftMenu:[
        {
            "menuguid": "4028e5c77490d828017490e037990004",
            "menupguid": "",
            "menuname": "菜单1",
            "showname": "菜单1",
            "menupath": "Collect",
            "classname": null,
            "type": 1,
            "sort": 2,
            "valid": 1,
            "isconstruction": 0,
            "menuChildren": null
        }, {
            "menuguid": "4028e5c77490d828017490df80b20003",
            "menupguid": "",
            "menuname": "菜单2",
            "showname": "菜单2",
            "menupath": "",
            "classname": null,
            "type": 1,
            "sort": 3,
            "valid": 1,
            "isconstruction": 0,
            "menuChildren": [{
                "menuguid": "4028e5c77490d828017490e2e6280005",
                "menupguid": "4028e5c77490d828017490df80b20003",
                "menuname": "菜单2-1",
                "showname": "菜单2-1",
                "menupath": "",
                "classname": null,
                "type": 1,
                "sort": 1,
                "valid": 1,
                "isconstruction": 0,
                "menuChildren": null
            }, {
                "menuguid": "4028e5c77490d828017490e31ee70006",
                "menupguid": "4028e5c77490d828017490df80b20003",
                "menuname": "菜单2-2",
                "showname": "菜单2-2",
                "menupath": "",
                "classname": null,
                "type": 1,
                "sort": 2,
                "valid": 1,
                "isconstruction": 0,
                "menuChildren": null
            }]
        },
      ],// 左菜单
image.png

相关文章

网友评论

      本文标题:vue项目报错Invalid prop: type check

      本文链接:https://www.haomeiwen.com/subject/rtxemktx.html