I'm trying to emit an event from a child Vue component to it's parent, I'm trying to do this with this.$emit('collapsemenu').
When I'm trying to get this event from the parent with v-on:collapsemenu="collapseMenuf($event)" nothing happens at all. The method does not run, but I'm sure the child event emits the event.
Am I missing something important here? I've tried to look for similar problems online, but nothing has 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>
From the parent component you should do it as this:
<Navbar v-on:collapsemenu="collapseMenuf"></Navbar>
Child component:
<svg
@click="collapse_menu($event)"
xmlns="http://www.w3.org/2000/svg"
class="hamburger"
viewBox="0 0 20 20"
fill="currentColor"
>
Access this $event inside a function like this:
const collapse_menu = (e) => {
console.log(e);
emit('click', e.target);
};
You can find more about vue emits here