This is the functionality of the Child Component:
registerUser() {
if (this.$refs.form.validate()) {
this.$emit('showLoader', true); // Triggers
this.$fireAuth
.createUserWithEmailAndPassword(this.email, this.password)
.then(() => {
this.$toast('Registration successful'); // Triggers
this.$emit('showLoader', false); // Does not trigger
this.$emit('closeModal'); // Does not trigger
})
.catch(error => {
const errorCode = error.code;
let errorMsg = '';
if (errorCode === 'auth/weak-password') {
errorMsg = 'Password is too weak.';
} else if (errorCode === 'auth/email-already-in-use') {
errorMsg = 'Email is already in use.';
} else errorMsg = error.message;
this.$toast(errorMsg, {
color: 'red',
dismissable: true,
x: 'center',
y: 'top'
});
this.$emit('showLoader', false); // Does not trigger
});
}
}
The emits I mentioned above do not fire even when the code block is reached. Below is how the parent component is set up:
<sign-up
@closeModal="closeDialog"
@showLoader="toggleLoading"
>
</sign-up>