File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<li>
<span
@click.stop="handleClick"
:class="{
'has-children': menu.childList && menu.childList.length > 0,
'menu-active': isActive(menu.menuId),
'open': menu.isOpen,
}"
>
{{ menu.menuNm }}
</span>
<ul v-if="menu.isOpen && menu.childList?.length > 0" class="sub-menu">
<MenuItem
v-for="(child, idx) in menu.childList"
:key="idx"
:menu="child"
:is-active="isActive"
:on-click="onClick"
@toggle="onToggle"
/>
</ul>
</li>
</template>
<script>
export default {
name: "MenuItem",
props: {
menu: Object,
isActive: Function,
onClick: Function,
},
methods: {
handleClick() {
if (this.menu.childList && this.menu.childList.length > 0) {
// const updatedMenu = {
// ...this.menu,
// isOpen: !this.menu.isOpen,
// };
// console.log("updatedMenu",updatedMenu)
this.$emit("toggle", this.menu);
} else {
this.onClick(this.menu);
}
},
onToggle(menu) {
this.$emit("toggle", menu);
},
},
};
</script>