Quasar CLI项目表单提交时输入字段值为null的问题求助

你定义的param对象是在组件初始化时创建的，此时所有ref的初始值都是空字符串。当用户在输入框中输入内容时，ref的值会更新，但param对象不会自动同步这些变化——因为它只是普通JavaScript对象，不具备响应式特性，所以提交时发送的还是初始化时的空值。

将param对象的创建移到handleSubmit函数内部，这样每次提交表单时，都会获取当前ref的最新值：

<script>
import { defineComponent } from "vue";
import { ref } from "vue";
import emailjs from "@emailjs/browser";

export default defineComponent({
  setup() {
    const email = ref("");
    const course = ref("");
    const fname = ref("");
    const phone = ref("");

    const error = ref(null);
    const isPwd = ref(null);

    const handleSubmit = async () => {
      // 每次提交时创建param，获取最新的ref值
      const param = {
        fname: fname.value,
        email: email.value,
        course: course.value,
        phone: phone.value,
      };
      
      emailjs
        .send("service_id", "template_id", param, "public key")
        .then(
          (result) => {
            console.log("success", result.status, result.text, param);
          },
          (error) => {
            console.log("FAILED...", error.text);
          }
        );
    };

    return {
      handleSubmit,
      email,
      phone,
      error,
      isPwd,
      fname,
      course,
    };
  },
});
</script>

如果你希望param始终与ref值保持同步，也可以使用reactive定义它：

const param = reactive({
  fname: "",
  email: "",
  course: "",
  phone: "",
});

之后在模板中直接绑定param.fname等字段，param会自动更新，提交时直接使用即可。但对于表单提交场景，第一种方法更简单直接。

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