hope you all doing fine. My form needs to collect user email addresses to be stored at Firebase cloud firestore. Although it does not work at this point, and I have not received any errors. it would be great if you can help me with this problem.
technologies: vue js 3, quasar, firebase
<q-form @submit="submitEmail()">
<q-input rounded standout bottom-slots v-model="email" placeholder="enter your email address">
<template v-slot:append>
<q-btn
rounded
icon="add"
label="join us"
type="submit"/>
</template>
</q-input>
</q-form>
import { defineComponent } from "vue";
import { collection, addDoc } from "firebase/firestore";
import db from "../boot/firebase";
export default defineComponent({
name: "PageIndex",
data() {
return {
email: '',
date: '',
};
},
methods: {
submitEmail() {
(async () => {
const docRef = await addDoc(collection(db, "waitList"), {
email: this.email,
date: Date.now(),
});
console.log("Document written with ID: ", docRef.id);
});
},
},
});
Try preventing the default form submission like this:
<q-form @submit.prevent="submitEmail()">
Then also try refactoring the submitEmail method like this:
methods: {
submitEmail() {
addDoc(collection(db, "waitList"), {
email: this.email,
date: Date.now(),
}).then(docRef =>
console.log("Document written with ID: ", docRef.id);
}).catch(e => console.log(e));
},
}