Quasar+Vue3表单提交邮箱到Firebase Firestore无报错不生效求助

问题核心原因 #

• submitEmail方法内的异步逻辑仅声明了匿名async函数，没有实际触发执行，所以Firestore写入逻辑全程没有运行，自然没有效果也没有报错
• 未添加异常捕获逻辑，就算后续运行出错也无法拿到错误信息定位问题
• 建议显式阻止表单提交的默认行为，避免意外页面刷新

修改后HTML代码 #

<q-form @submit="submitEmail($event)">
    <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>

修改后JS代码 #

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: {
    async submitEmail(e) {
      // 阻止表单默认提交刷新行为
      e?.preventDefault()
      try {
        const docRef = await addDoc(collection(db, "waitList"), {
          email: this.email,
          date: Date.now(),
        });
        console.log("Document written with ID: ", docRef.id);
        // 提交成功后清空输入框可按需开启
        // this.email = ''
      } catch (err) {
        // 打印错误方便排查
        console.error("添加文档出错: ", err);
      }
    },
  },
});

后续排查方案 #

如果修改后仍未正常运行，可按以下步骤排查：

1. 打开浏览器控制台查看是否有权限报错，确认Firebase Security Rules是否允许用户写入waitList集合
2. 确认boot/firebase文件中的Firebase初始化配置正确，Firestore实例导出正常
3. 提交表单前打印this.email的值，确认输入框双向绑定生效，输入内容可以被正确读取

内容的提问来源于stack exchange，提问作者Pooya Panahandeh