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项目本地没有问题但部署到服务器上提示错误的解决方法,感兴趣的朋友一起看看吧2023-05-05
vue hash模式改成history,同时实现spa预渲染问题
这篇文章主要介绍了vue hash模式改成history,同时实现spa预渲染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03


最新评论