Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<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)

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading