[Vuejs]-Emit does not work inside axios call, but does outside

by

1👍

✅

Your LoginPage component is displayed using a v-else-if :

<!--  when generalState.isLoading is true -->
<template v-if="generalState.isLoading">
    <Loading/>
</template>
<!--  that component get removed, 
which means the token event listener get also removed -->
<template v-else-if="!token">
    <LoginPage @token="setToken"/>
</template>

What you can do is :

1 / don’t use v-else-if, but a simple v-if instead, so your component is not removed

2 / Use a v-show to hide your component without removing it, because you might encounter styling issues, it’s cleaner to hide it so your loader is displaying fine.

<!--  when generalState.isLoading is true -->
<template v-if="generalState.isLoading">
    <Loading/>
</template>
<!--  that component do not get removed but just hidden -->
<template v-if="!token" v-show="!generalState.isLoading">
    <LoginPage @token="setToken"/>
</template>

What is happening is that your axios callback get actually called, but your component has been removed by then and is going to be destroyed, so the parent component no longer listen to the events that the component is emitting

👤Lk77

Leave a comment