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:

enter image description here

>Solution :

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)

Leave a Reply