Vue emits do not get fired / received

Question

Here is the Child Componen´s function

signUp() {
  if (this.$refs.form.validate()) {
    this.$emit('loadcard', true); //firing
    this.$fireAuth
      .createUserWithEmailAndPassword(this.mail, this.pw)
      .then(() => {
        this.$toast('Registered successfully'); // firing
        this.$emit('loadcard', false); // Not firing
        this.$emit('closemodal'); // Not firing
      })
      .catch(error => {
        const errorCode = error.code;
        let msg = '';
        if (errorCode === 'auth/weak-password') {
          msg = 'The password is too weak.';
        } else if (errorCode === 'auth/email-already-in-use') {
          msg = 'The email is already in use.';
        } else msg = error.message;

        this.$toast(msg, {
          color: 'red',
          dismissable: true,
          x: 'center',
          y: 'top'
        });

        this.$emit('loadcard', false); // Not firing
      });
  }
}

The emits I commented do not fire even if the point in code is reached. Here is the parent components declaration:

<sign-up
   @closemodal="dialog = false"
   @loadcard="switchLoading"
>
</sign-up>

Is the emitting element an immediate child of the listening element? — tony19, Jul 09 '19 at 06:44
I suspect the reference to "this" changes within that scope, try referencing the component directly, see https://stackoverflow.com/questions/49417410/how-to-save-reference-to-this-in-vue-component — Mark Z., Jul 09 '19 at 06:50
as @tony19 is asking, events can only be listened up to immediate parent, you might have to re-emit event from the parent for it to be listened by ancestor component. another option you have is using `vuex` or any state manager. — kcsujeet, Jul 09 '19 at 06:51

score 0 · Answer 1 · answered Jul 09 '19 at 08:18

0

everything look fine, but i guess the problem maybe involve with this.$toast.

so try to remove it and check if it reach last line in then or catch

answered Jul 09 '19 at 08:18

Poomchai Taechaprapasrat

11
2

bbsimonbb · Answer 2 · 2019-07-09T07:53:15.927

-1

As mentioned in the comments, this is not this inside nested functions. Assign var me = this at the top level of your closure, then use it throughout the rest of the function.

While we're here, you're doing some application scope heavy lifting (creating a new user) in a Vue component and, surely as a consequence, your code makes heavy use of $emit. Another way is possible. You can get these sequences out of Vue, into global scope where they can directly modify a store, then use Vue's reactivity system, not the anemic events system, to propagate the changes.

edited Jul 09 '19 at 07:53

answered Jul 09 '19 at 06:55

bbsimonbb

27,056
15
80
110

1

What you write in your first paragraph is not correct. `this` is not changed for arrow functions, which the OP uses. I agree with your assessment though, that the problem calls for using `vuex`. – bodo Jul 09 '19 at 07:44
I think I mentionned nested functions, not specifically arrow functions, but it doesn't matter. Until someone shows me a better way, I believe you must assign `this` at the start of a closure. – bbsimonbb Jul 09 '19 at 07:49
@bbsimonbb It does matter. Arrow functions do not work the same way as normal nested functions. An arrow function will not change the surrounding `this` value. There is no need to use `var me = this` if the nested functions are arrow functions. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions, first paragraph: *'without its own bindings to the `this` ... keyword'*. – skirtle Jul 09 '19 at 11:42
@skirtle I know how lexical this works. In a Vue component, you can't use `this` in a nested function, either an arrow function or a function with the function keyword. So you have to assign `this`. [Here is a codesandbox](https://codesandbox.io/s/vue-template-tdqno?fontsize=14) to demonstrate `this` not working. If you have a way of using `this` in Vue in a nested function I would be interested to see it. – bbsimonbb Jul 09 '19 at 12:37
@bbsimonbb I tried your codesandbox example and `this` is working fine for me in that first timer. The only reason it *appears* not to work is because the third timer runs at the same time. If you remove all the other timers you'll find that first timer works perfectly. There is no need to use `me` here. – skirtle Jul 09 '19 at 13:45

Vue emits do not get fired / received

2 Answers2