Unable to receive inputs from user

Question

I am using quasar cli where I initialized my quasar project and included inputs fields in a form but when I try to submit a form the fields are sent as null in the console and in the payload. Below is the code I am using :

<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 param = {
      fname: fname.value,
      email: email.value,
      course: course.value,
      phone: phone.value,
    };

    const handleSubmit = async () => {
      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>

Submitting a form and checking the fields in the console

Answer 1

I solved it by moving param inside the handlesubmit function

<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 () => {
      
    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>