Currently, I am attempting to retrieve data from a form in Vue using TypeScript. However, when declaring the data that I intend to use with this form, it seems to be posted on the fields as shown in this screenshot: message getting posted. I am unsure how to correct this issue because apparently, very few people utilize Vue with TypeScript, making it difficult to find a solution. Below is the code for the component, and I would greatly appreciate any assistance in resolving this problem or suggesting an alternate method of declaring the data.
<form class="container" id="help-form" @submit.prevent="postForm">
<h1>Help Portal</h1>
<h3>
Here you can reach out to GAAP I.A.P advisors to receive digital assistance.
</h3>
<div class="section">
... (omitted for brevity)
</div>
<div class="section">
... (omitted for brevity)
</div>
<div class="section">
... (omitted for brevity)
</div>
<div class="section">
... (omitted for brevity)
</div>
<p>
*Once you submit your request, a designated advisor from GAAP will contact you promptly to follow up.
</p>
</form>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "HelpForm",
data() {
return{
seccion: String,
nombre: String,
correo: String,
telefono: Number,
mensaje: String,
}
},
methods: {
postForm: function () {
console.log({seccion: this.seccion, nombre: this.nombre, correo: this.correo, telefono: this.telefono});
},
},
});
</script>