Quasar VueJS表单提交

Question

希望你们都做得很好。我的表单需要收集用户电子邮件地址，以存储在Firebase云firestore中。尽管它在这一点上不起作用，而且我还没有收到任何错误。如果你能帮我解决这个问题，那就太好了。

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

Answer 1

尝试阻止默认表单提交，如下所示：

<q-form @submit.prevent="submitEmail()">

然后还可以尝试重构submitEmail方法，如下所示：

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