Unable to receive inputs from user - vuejs3

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

Your problem looks to be that you're sending in the param property when the form is submitted:
emailjs.send("service_id", "template_id", param, "public key")
but param, which is defined here,
const param = {
fname: fname.value,
email: email.value,
course: course.value,
phone: phone.value,
};
is not "reactive", it remains filled with the initial values of your reactive properties, null.
One Option:
A better solution is to send in data that is in fact reactive. One way to do this is via a computed property.
For example:
<template>
<form action.prevent="sendStuff">
<fieldset>
<legend>My Form</legend>
<div class="entry">
<label for="fname">First Name</label>
<input type="text" v-model="fname" id="fname" />
</div>
<div class="entry">
<label for="email">EMail</label>
<input type="email" v-model="email" id="email">
</div>
<button #click.prevent="sendStuff">
Send Data
</button>
</fieldset>
</form>
</template>
<script setup>
import { ref, computed } from 'vue'
const email = ref("");
const fname = ref("");
// const course = ref("");
// const phone = ref("");
const param1 = {
fname: fname.value,
email: email.value,
// course: course.value,
// phone: phone.value,
}
const param2 = computed(() => {
return {
fname: fname.value,
email: email.value,
// course: course.value,
// phone: phone.value,
}
});
const sendStuff = () => {
console.log('param1', param1);
console.log('param2', param2.value);
}
</script>
<style scoped>
.entry {
display: grid;
grid-template-columns: 1fr 2fr;
margin: 4px 2px;
}
</style>
Here, the first parameter property, param1, gathers data as you have been doing so, in a non-reactive way:
const param1 = {
fname: fname.value,
email: email.value,
// course: course.value,
// phone: phone.value,
}
This data will not change despite a user's entering information into your form's fields.
The second parameter example, parame2, uses a computed property to gather the information held by the form's fields:
const param2 = computed(() => {
return {
fname: fname.value,
email: email.value,
// course: course.value,
// phone: phone.value,
}
});
and here the data is reactive and changes when the user updates it.
Second Option:
Another option is to encapsulate the model into one reactive property,
const param3 = reactive({
email: '',
fname: '',
course: '',
phone: '',
});
and then send this object's values to your API. For example:
<template>
<form action.prevent="sendStuff">
<fieldset>
<legend>My Form</legend>
<div class="entry">
<label for="fname">First Name</label>
<input type="text" v-model="param3.fname" id="fname" />
</div>
<div class="entry">
<label for="email">EMail</label>
<input type="email" v-model="param3.email" id="email">
</div>
<button #click.prevent="sendStuff">
Send Data
</button>
</fieldset>
</form>
</template>
<script setup>
import { reactive } from 'vue'
const param3 = reactive({
email: '',
fname: '',
course: '',
phone: '',
});
const sendStuff = () => {
console.log(param3);
// TODO: submit form data, as param3, to the back-end
// receive asynchronous promise and handle it here
}
</script>
<style scoped>
.entry {
display: grid;
grid-template-columns: 1fr 2fr;
margin: 4px 2px;
}
</style>

Answer 2

As #HovercraftFullOfEels explained, param is not reactive in your code. Please consider the following option, besides the one presented in their answer:
Option 3
(a variant of Hovercraft's Option 2): use reactive, but rather than having using v-model="param.email" in template, spread it using toRefs, so you could use v-model="email":
import { toRefs, reactive } from 'vue'
// remove `fname`, `email`, `course` and `phone` refs
const param = reactive({
fname: '',
email: '',
course: '',
phone: ''
})
const { fname, email, course, phone } = toRefs(param)

Answer 3

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>