'Vue 3 - emit is not a function
I'm having a strange problem using emit in Vue 3 Composition API + Vite.
I want to make a simple emit from a child component to a parent.
The code of the child:
<template>
<div class="main-stats">
<v-container @click="logInWithSpotify" class="boton-login">
Iniciar sesión con Spotify
</v-container>
</div>
</template>
<script setup>
const emits = defineEmits(["logInIsCorrect"]);
function logInWithSpotify() {
emits.logInIsCorrect(true);
}
</script>
The only purpose of the child is to press the button and call the emit to the parent via a custom method called logInWithSpotify()
The code of the parent:
<template>
<v-app>
<v-main class="main">
<v-template v-if="userIsLoged">
<MainStats />
</v-template>
<v-template v-else>
<Login @logInIsCorrect="setLogInIsCorrect" />
</v-template>
</v-main>
</v-app>
</template>
<script setup>
import { ref, defineAsyncComponent } from "vue";
import Login from "./components/Login.vue";
const MainStats = defineAsyncComponent(() => import("./components/MainStats.vue"));
const userIsLoged = ref(false);
function setLogInIsCorrect(value) {
console.log(value);
userIsLoged.value = value;
}
</script>
The expected behavior is that when the button of the child component is pressed, the emit having a "true" parameter, gets to the parent and changes the userIsLogged variable to that "true".
Funny thing is that yesterday the code worked perfectly, today it didn't.
On the console, it appears:
Solution 1:[1]
Hey im editing my answer:
I feel like the problem is in your setup
<script setup>
const emits = defineEmits(["logInIsCorrect"]);
function logInWithSpotify() {
emits.logInIsCorrect(true);
}
</script>
After reading this quick blog: https://www.angularfix.com/2022/03/uncaught-typeerror-emit-is-not-function.html
wouldn't it be like so:
<script setup>
const emits = defineEmits(["logInIsCorrect"]);
function logInWithSpotify(val) {
emits(logInIsCorrect, val);
}
</script>
And then you pass your Val through to LoginWithSpotify(true)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 |