data: {
menuItems: [{
name: 'Item 1',
children: [{
name: 'Subitem 1'
}, {
name: 'Subitem 2'
}, {
name: 'Subitem 3'
}]
},
{
name: 'Item 2'
}
],
selectedDropdown: 'None'
},
methods: {
setSelectedItem(item) {
this.selectedDropdown = item;
}
},
ready: function() {
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
}.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}<ul>
<li :class="{ current : item === value }" v-for="item in list" @click="select(item)">{{ item }}</li>
</ul>
<ul class="dropdown-menu" v-if="item.children">
<li v-for="child in item.children"><a tabindex="-1" href="#" @click="setSelectedItem(child.name)">{{child.name}}</a></li>CodePen link https://codepen.io/santoshch/pen/mdWwepg
Attempted to include submenus in the dropdown menu but encountered challenges in creating multi-level dropdowns. Added additional ul and li tags for displaying items, but unsure of the next steps.
Although items and values are already present in the data set, additional items need to be included for multi-level submenus.
When trying to add code for sub-level items in the dropdown menu, encountered an error.