Quasar VueJS form submission-CodePudding

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);
      });
    },
  },
});

CodePudding user response：

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));
  },
}