Ant-design-vue: Cannot read property 'propsData' of undefined at VueComponent.renderCommonMenuItem

Created on 13 Mar 2019  ·  8Comments  ·  Source: vueComponent/ant-design-vue

  • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.3.5

Environment

Windows x64, Chrome 70, vue-cli 3.5.0

Reproduction link

Edit on CodeSandbox

Steps to reproduce

follow the step: https://vue.ant.design/components/menu-cn/#API

What is expected?

It should be the same as the image example of the official website.

What is actually happening?

throw an error:

vue.runtime.esm.js?2b0e:1887 TypeError: Cannot read property 'propsData' of undefined
    at VueComponent.renderCommonMenuItem (SubPopupMenu.js?1462:277)
    at VueComponent.renderMenuItem (SubPopupMenu.js?1462:338)
    at eval (SubPopupMenu.js?1462:390)
    at Array.map (<anonymous>)
    at Proxy.render (SubPopupMenu.js?1462:389)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3535)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4041)
    at Watcher.get (vue.runtime.esm.js?2b0e:4444)
    at Watcher.run (vue.runtime.esm.js?2b0e:4519)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4275)

Most helpful comment

Hi,

I have a similar issue, I used the fully imported Antd but I want to switch to importing components one by one, if I import "Menu", I have the same "Cannot read property 'propsData' of undefined when I replace

All 8 comments

Hi there!

You should import custom sub-menu component (see docs)
Screenshot: https://i.gyazo.com/bc8d07bb333546164dff9ca8a779e858.png

But i have already input antd globally,Is there still have the necessity to input again?

@XiaYuYing <a-sub-menu /> not <sub-menu/>

Hi,

I have a similar issue, I used the fully imported Antd but I want to switch to importing components one by one, if I import "Menu", I have the same "Cannot read property 'propsData' of undefined when I replace

@mgnrfk Have you found any solution?

This appears to be a design problem in SubPopupMenu::render() around line 393, where the code makes an assumption that child nodes are antd menu items. That prevents using other components within such as OP's example, or portals/slots for dynamic menus, and so on. For example, you will get the error doing code below if the slot contains anything other than antd items (such as wrappers):

<a-menu> <slot name="menu-items"></slot> </a-menu>

但是我已经antd在全球范围内输入了,是否仍然需要再次输入?
不需要了

When I wanted to use ant-design-vue dropdown menu plugin, I was getting such kind of error. My components registrations was like this;

components: {
  'a-menu': Menu,
  'a-menu-item': Menu.Item,
  'a-dropdown': Dropdown,
}

Then I removed the 'a-menu-item' line, the error disappeared

components: {
  'a-menu': Menu,
  'a-dropdown': Dropdown,
}

maybe it could be help

Was this page helpful?
0 / 5 - 0 ratings