Struggling with Vue 3 app authentication through event-emission from child to parent. Below is a snippet of the code:
Child
<template>
<form class="msform">
<input @click="goToLogin" type="button" name="next" value="Login" />
</form>
</template>
<script>
import Cookies from "js-cookie";
export default {
emits:['event-login'],
methods: {
goToLogin() {
this.$emit("event-login");
},
},
};
</script>
Parent
<template>
<login v-if='loggedIn' @event-login='logIn'/>
<div class="my-page">
<router-view/>
</div>
</template>
<script>
import Cookies from "js-cookie";
import Login from '../pages/Login'
export default {
name: "MainLayout",
components:{
"login":Login
},
data() {
return {
loggedIn: false,
};
},
methods: {
logIn() {
this.loggedIn = true;
}
}
}
Seeking assistance as to why the event is not being handled in the parent component.