Quasar VueJS 表单提交

Question

希望你们一切都好。我的表单需要收集要存储在 Firebase cloud firestore 中的用户电子邮件地址。虽然此时它不起作用，而且我没有收到任何错误。如果你能帮我解决这个问题就太好了。

技术：视图 3，类星体，火力基地

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

Quasar VueJS 表单提交

Quasar VueJS form submission

javascript

firebase

vue.js

google-cloud-firestore

quasar-framework