0

I have a Vue 3 app and I am seeing inconsistencies in the behaviour of the $emit function.

async updateContact(contact) {
    this.$emit("loading", true);
    await this.updateCustomerDetails().then((response) => {
      console.log(response);          
    }).catch((error) => {
      this.$emit("handleError", error);
    });

    this.$emit("loading", false);
}

The first call to $emit seems to work as expected but the subsequent two do not and I can't work out why that might be.

To give some more context, this is my structure:

<app-tabs :tabList="tabs" :activeTab="activeTab" @selectTab="updateSelectedTab">
    <template v-slot:tabPanel-1>
      <customer-details @loading="loading" @handle-error="handleError">
      </customer-details>
    </template>
</app-tabs>

My customer details component is what should be emitting those events. I've wasted most of my afternoon trying to get to the bottom of this and fear now I am missing something obvious or completely misunderstanding this somewhere along the line.

I have put together a simplified example.

ProNotion
  • 3,662
  • 3
  • 21
  • 30
  • Did you add the `emits` option with those events? – Boussadjra Brahim Jul 27 '22 at 16:25
  • Like in this answer https://stackoverflow.com/a/64608868/8172857 – Boussadjra Brahim Jul 27 '22 at 16:26
  • In my customer details component? If so, yes I have tried that as follows `emits: ["handleError", "loading"],` and it doesn't seem to make a difference. I also didn't think it was a requirement but an option? – ProNotion Jul 27 '22 at 16:33
  • I tried reproducing this example and it works just fine. My guess is that the error lies somewhere else outside of the code you posted. Also, this may be a silly question, but are you sure the method you're awaiting is actually returning? – Dr4jw3r Jul 27 '22 at 16:59
  • It's unclear what you mean by "works". Does the `$emit()` call not emit the event? Does the parent component not receive the event? Does the event handler not see the expected value? Can you share a link to a reproduction of the problem? – tony19 Jul 28 '22 at 05:30
  • I tried removing the async elements of this case with no change in the behaviour. I see the same issue though if I move the $emit into the callback itself. The parent does not seem to receive the event, I have breakpoints set in the function and they are not hit. I will try and construct a simplified example of the problem and post it in here. – ProNotion Jul 28 '22 at 05:58
  • I have added a link in the description to a simplified example but for some reason, my slot contents are not showing up. I tried the component outside of the slots and it worked as expected so I need to check the example with it rendered in the slot. – ProNotion Jul 28 '22 at 08:33
  • To add to the confusion, what seems to work is if I emit the event directly from a button rather than a method on the component, the event seems to emit fine. E.g. `@click.prevent="$emit('loading', true)"` works. – ProNotion Aug 01 '22 at 13:16

0 Answers0