I am in the process of creating an application using Vue.js and Firebase. Despite being new to Firebase, I have encountered some issues that I am struggling with. Specifically, I am trying to store names and email addresses in the database. My goal is to first check if the email address provided already exists in the database. If it does not, I want to execute another function to store the name and email address. However, if the email address is already present in the database, I would like to display an alert message and prevent the submission.
So far, I have been able to successfully check for the email in the database and trigger the alert message. I can also retrieve data from the database without any problems. The issue arises when I enter a new email address that is not yet stored in the database. Upon entering a new email address (along with a name), the system checks the database and initially returns false. However, it then inexplicably makes another call, which results in a true response indicating that the email is already on file. As a result, the alert about the email's presence is displayed simultaneously with the initial false response. Subsequently, the system proceeds to run another function to store the data because of the false response received during the initial call.
Here is the JavaScript code I am currently using:
checkForm() {
let app = this;
if (this.name == '' || this.emailaddress == '') {
alert('Please fill out the form completely');
} else {
app.getFirebase();
}
},
getFirebase() {
let app = this;
var ref = firebase.database().ref().child('/aanmeldingen/');
ref.on('value', function(snapshot) {
const array = [];
snapshot.forEach(function(childSnapshot) {
var checkEmail = childSnapshot.val().email;
array.push(checkEmail);
});
const res = array.includes(app.emailaddress);
console.log(array);
console.log(res);
if(res) {
alert('You have already entered the giveaway');
} else {
app.store();
}
});
},
store() {
this.step_two = false;
this.active_two = false;
this.active_three = true;
this.step_three = true;
let app = this;
firebase.database().ref('/aanmeldingen/').push({
username: app.name,
email: app.emailaddress,
});
}
Below is a screenshot from the console log after entering the name "Jane," who is not found in the database: