ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefined

 更新时间:2023年08月21日 10:15:08   作者:柯柯的呵呵哒  
这篇文章主要介绍了ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefined解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

ant design of vue插件中的菜单使用

我们在使用 ant design of vue插件中的菜单时,使用组件会报错。原因是ant 推荐使用函数组件,如果,使用传统的组件,就会报错。

Before v2.0, 因组件内部会动态更改a-sub-menu的属性,如果拆分成单文件,无法将属性挂载到a-sub-menu上,你需要自行声明属性并挂载。为了方便,避免属性的声明,我们推荐使用函数式组件。

父组件代码

<a-menu
     :default-selected-keys="['first']"
     :default-open-keys="['first']"
      mode="inline"
      theme="light"
      style="height: calc(100vh - 96px)"
      :inline-collapsed="collapsed"
 >
          <a-menu-item key="first">
                <router-link to="/">
                        <a-icon type="home" />
                        <span>首页</span>
                    </router-link>
          </a-menu-item>
          <template v-for="(item, index) in data">
                  <a-menu-item :key="index" v-if="!item.children">
                        <router-link :to="item.path">
                            <a-icon :type="item.icon" />
                            <span>{{item.name}}</span>
                        </router-link>
                   </a-menu-item>
                   <sub-menu v-else :key="index" :data="item" :index="index"/>
         </template>
</a-menu>

函数组件代码

<template functional>
    <a-sub-menu :key="props.index">
        <span slot="title">
            <a-icon :type="props.data.icon" />
            <span>{{props.data.name}}</span>
        </span>
        <template v-for="(item, index) in props.data.children">
            <a-menu-item :key="props.index + '-' + index" v-if="!item.children">
                <router-link :to="item.path">
                    <a-icon :type="item.icon" />
                    <span>{{item.name}}</span>
                </router-link>
            </a-menu-item>
            <!-- 循环函数组件 -->
            <sub-menu v-else :key="props.index + '-' + index" :data="item" :index="props.index + '-' + index"/>
        </template>
    </a-sub-menu>
</template>

 说明:key的值是菜单选中时,所需要识别的唯一标识,所以,不能够重复

以上就是ant 菜单组件报错Cannot read property ‘isRootMenu‘ of undefined的详细内容,更多关于ant 菜单组件报错的资料请关注脚本之家其它相关文章!

相关文章

  • Vue路由组件传递参数的六种场景

    Vue路由组件传递参数的六种场景

    在Vue应用程序中,路由组件是构建单页应用的关键部分,传递参数给路由组件可以让我们动态地展示内容,处理用户输入,以及实现各种交互功能,本文就给大家介绍了六种Vue路由组件传递参数场景,需要的朋友可以参考下
    2023-09-09
  • vue环境变量配置之process.env解读

    vue环境变量配置之process.env解读

    这篇文章主要介绍了vue环境变量配置之process.env解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue+bpmn.js实现自定义流程图的完整代码

    vue+bpmn.js实现自定义流程图的完整代码

    这篇文章主要介绍了vue+bpmn.js实现自定义流程图的完整代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借价值,需要的朋友参考下吧
    2024-03-03
  • vue请求数据的三种方式

    vue请求数据的三种方式

    这篇文章主要介绍了vue请求数据的三种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 解决vue项目 build之后资源文件找不到的问题

    解决vue项目 build之后资源文件找不到的问题

    这篇文章主要介绍了解决vue项目 build之后资源文件找不到的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 在nuxt中使用路由重定向的实例

    在nuxt中使用路由重定向的实例

    这篇文章主要介绍了在nuxt中使用路由重定向的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue Render函数原理及代码实例解析

    Vue Render函数原理及代码实例解析

    这篇文章主要介绍了Vue Render函数原理及代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • Vue项目本地没有问题但部署到服务器上提示错误(问题解决方案)

    Vue项目本地没有问题但部署到服务器上提示错误(问题解决方案)

    一个 VUE 的项目在本地部署没有问题,但是部署到服务器上的时候提示访问资源的错误,遇到这样的问题如何解决呢?下面小编给大家带来了Vue项目本地没有问题但部署到服务器上提示错误的解决方法,感兴趣的朋友一起看看吧
    2023-05-05
  • vue hash模式改成history,同时实现spa预渲染问题

    vue hash模式改成history,同时实现spa预渲染问题

    这篇文章主要介绍了vue hash模式改成history,同时实现spa预渲染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • 详解基于webpack和vue.js搭建开发环境

    详解基于webpack和vue.js搭建开发环境

    本篇文章主要介绍了详解基于webpack和vue.js搭建开发环境 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04

最新评论