Quasar VueJS 表单提交

Posted 2023-02-22

【中文标题】Quasar VueJS 表单提交

【英文标题】：Quasar VueJS form submission

【发布时间】：2021-11-24 21:32:54

【问题描述】：

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

技术： Vue JS 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);
      );
    ,
  ,
);

【问题讨论】：

看来你没有做 e.preventDefault();提交时是否会刷新整页？

现在我添加了它，但它仍然不起作用，甚至功能也没有触发。

【参考方案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));
  ,

【讨论】：

它不起作用，同样的问题函数没有触发并且没有错误。

@PooyaPanahandeh 你能试试<q-form @submit.prevent @submit="submitEmail()"> 也试试重启你的开发服务器。

现在完美运行，非常感谢您的帮助。