Calling this.$emit twice from the same async function doesn't seem to work (Electron + Axios)

[izs]

Hi everyone,
i have the following async function:

signIn: async function() {
      try {
        this.$emit("setLoading");
        let response = await axios.post("http://localhost:3000/signIn", {
          usernameOrEmail: this.usernameOrEmail,
          password: this.password
        });
        switch (response.status) {
          case 200:
            this.$router.push("/List");
            break;
          default:
            break;
        }
      } catch (error) {
        this.$q.notify({
          type: "negative",
          message: `Something went wrong. ${error}`
        });
      } finally {
        this.$emit("loadingCompleted");
      }
    }

These 2 events are being used by the router-view:

<router-view
   @setLoading="setLoading" 
   @loadingCompleted="loadingCompleted"
/>

setLoading: function() {
   alert("setLoading");
},
loadingCompleted: function() {
   alert("loadingCompleted");
},

In this case the first emit (“setLoading”) gets called and the alert appears, however when the 2nd emit gets called nothing happens; no error in console and no alert printed. Same if i use console.log instead of alert.
However if i remove the axios call everything seems to work fine.

Anyone has any idea of what could be causing this?

[Ilia]

@izs I have a feeling that you might not be using your component properly, as you are waiting <router-view /> to emit the events (but router-view has no name!)

Please check this page first and if it doesn’t make sense, it’s better if you create an example in codepen or jsfiddle
https://router.vuejs.org/api/#router-view

[izs]

You are right, should have posted a jsfiddle sorry.
However i fixed it.

router-view had a v-if that i was using to alternate between itself and a loading component.
Moving from v-if to v-show solved the problem.