After spending several hours on it, I find myself more and more perplexed about the inner workings of async/await. Currently, here's the code I'm dealing with:
created: function () {
Event.$on('open-stage', (stage) => {
this.$validator.validateAll().then(() => {
const validateFields = async () => {
const uniqueEmail = await this.checkIfUniqueEmail();
if(uniqueEmail) {
console.log('uniqueEmail is true'); // <-- this is what I need to achieve
Event.$emit('change-stage', this.wizardStage.successor);
}
};
validateFields();
}).catch(() => {
toastr.warning('Error');
Event.$emit('change-stage-denied');
return true;
});
});
},
methods: {
checkIfUniqueEmail() {
if (!this.player.email || !this.player.email.length) {
return true;
}
this.$http.post('playerExists', {
email: this.player.email
}).then(response => {
if (response.data.exists) {
toastr.error(Good');
Event.$emit('change-stage-denied');
return false;
}
return true;
}).catch(error => {
toastr.warning('Fail');
Event.$emit('change-stage-denied');
return false;
});
},
}
The aim is straightforward - when the checkIfUniqueEmail() method returns true, I want to trigger a console.log and emit change-state. The issue I'm facing is that the constant uniqueEmail always ends up as undefined. How can I ensure that this only happens after the response from the checkIfUniqueEmail() function confirms it as true? What adjustments do I need to make? I am using vue.js 2.1.10.