I am attempting to trigger an event from a child Vue component to its parent using this.$emit('collapsemenu').
However, when I try to capture this event in the parent using
v-on:collapsemenu="collapseMenuf($event)"Is there something crucial that I am overlooking here? I have searched for similar issues online, but none of the solutions have worked so far.
Navbar (Child)
<template>
<div class="navbar">
<div class="navbar-left">
<svg
@click="collapse_menu"
xmlns="http://www.w3.org/2000/svg"
class="hamburger"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="navbar-right"></div>
</div>
</template>
<script>
export default {
name: "Navbars",
components: {},
methods: {
collapse_menu() {
console.log("clicked");
this.$emit("collapsemenu", "TRUE");
},
},
};
</script>
<style lang="scss" scoped>
.navbar {
width: 100%;
height: 70px;
background: yellow;
padding: 10px;
&-left {
width: 50%;
}
}
.hamburger {
cursor: pointer;
height: 30px;
}
</style>
Main
<template>
<div class="dashboard h-screen bg-red-200">
<Menu class="menu"></Menu>
<div class="content">
<Navbar v-on:collapsemenu="collapseMenuf($event)"></Navbar>
</div>
<!-- <Content></Content> -->
</div>
</template>
<script>
import Navbar from "../../components/dashboard/navbar.vue";
import Menu from "../../components/dashboard/menu.vue";
export default {
name: "Dash-main",
components: { Navbar, Menu },
data() {
return {
collapse: false,
};
},
methods: {
collapseMenuf(value) {
console.log("fsd");
this.collapse = value;
console.log(value);
},
},
};
</script>
<style lang="scss" scoped>
.dashboard {
display: flex;
width: 100%;
}
.content {
width: 100%;
}
</style>