Vue js, Getting data from a form in Vue using TypeScript

user_15716607 0
Viewed 955

Im currently trying to get data from a form in Vue using typescript but when declaring the data im gonna use this gets posted on the fields message geting posted i dont know how to correct this because no one uses vue with typescript aparently so i havent been able to find a solution heres the code for the component i would apreciate any help on figuring out how to stop this or a different way of declaring data

  <form class="container" id="help-form" @submit.prevent="postForm">
    <h1>Portal de Ayuda</h1>
    <h3>
      Aqui podras ponerte en contacto con asesores de GAAP I.A.P para recibir
      ayuda de manera digital.
    </h3>
    <div class="section">
      <h2>Paso 1: Selecciona el tema de ayuda</h2>
      <select id="seccion"  v-model="seccion" name="seccion">
        <option value=1>Ayuda con Nutricion</option>
        <option value=2>Ayuda con Medicina</option>
        <option value=3>Ayuda con Dental</option>
        <option value=4>Ayuda con Rehabilitacion</option>
        <option value=5>Ayuda con Tanatologia</option>
      </select>
    </div>

    <div class="section">
      <h2>Paso 2: Ingresa tu informacion de contacto</h2>

      <label for="name" class="form-label">Nombre</label>
      <input
        v-model="nombre"
        type="text"
        id="name"
        name="name"
        placeholder="Escribe tu nombre completo aqui"
      />

      <label for="mail" class="form-label">Correo Electronico</label>
      <input
        v-model="correo"
        type="mail"
        id="mail"
        name="name"
        placeholder="ejemplo@correo.com"
      />

      <label for="phone" class="form-label">Telefono</label>
      <input
        v-model="telefono"
        type="tel"
        id="phone"
        name="phone"
        placeholder="10 digitos"
      />
    </div>
    <div class="section">
      <h2>Paso 3: Escribe en que necesitas ayuda</h2>
      <textarea
        v-model="mensaje"
        name="message"
        id="message"
        placeholder="Redacta aqui tu duda en 250 caracteres o menos"
      ></textarea>
    </div>
    <div class="section">
      <h2>Paso 4: Envia tu solicitud de ayuda</h2>
      <input type="submit" name="submit" value="Enviar" />
    </div>
    <p>
      *Una vez enviada tu solicitud un asesor designado de GAAP se pondra en
      contacto contigo a la brevedad para dar seguimiento.
    </p>
  </form>
</template>

<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>
vue-component vue.js typescript
1 Answers

What you are doing here:

data() {
  return{
    seccion: String,
    nombre: String,
    correo: String,
    telefono: Number,
    mensaje: String, 
   }
  },

is assigning the String javascript object as the value of your variables, thus the output in the view.

I usually just assign empty string value to the varibales, but using "" as string should work too. But as said, I usually just add them as empty strings:

data() {
  return{
    seccion: "",
    nombre: "",
    correo: "",
    telefono: "",
    mensaje: "", 
   }
  },

Objects are a different matter and I do use strong typing then :)

user_62940720
Related