Menu child items do not display with MenuItem

[Al]

When using a template as below then the child items do not display:

<template>
    <kendo-menu>
        <kendo-menu-item text="Baseball">
            <kendo-menu-item text="Top News"></kendo-menu-item>
            <kendo-menu-item text="Radio Records"></kendo-menu-item>
        </kendo-menu-item>
        <kendo-menu-item text="Swimming">
            <kendo-menu-item text="Top News"></kendo-menu-item>
        <kendo-menu-item text="Radio Records"></kendo-menu-item>
        </kendo-menu-item>
    </kendo-menu>
</template>

 

The same problem can be seen in your docs under 'Basic Usage':

https://www.telerik.com/kendo-vue-ui/components/layout/menu/

 

Using 'ul' instead of 'MenuItem' it seems to work fine

 

[Petar]

Hi Al,

The reported issue is а miss in our demos and it will be fixed very soon. The reason why the linked demo doesn't work as expected is that it uses Vue 3. The same demo will work correctly in Vue 2 as it is demonstrated in this StackBlitz example.

In Vue 3, the nested tags are not recommended and this is why we recommend defining the component's properties with nested properties as in this Binding to Local Data Arrays demo.

It is our plan to add an article that discusses the differences and recommendations for Vue 3 vs. Vue 2 and the nested tags will be included in this article.

I've updated your Telerik points as a sign of gratitude for reporting the issue.

Regards,
Petar
Progress Telerik