Vue js，使用 TypeScript 从 Vue 中的表单获取数据

Question

我目前正在尝试使用打字稿从 Vue 中的表单获取数据，但是当声明我要使用的数据时，它会发布在字段上 message geting posted 我不知道如何更正此问题，因为没有人使用 vue typescript aparently 所以我一直没能找到解决方案继承人组件的代码我会很感激任何帮助找出如何停止这个或声明数据的不同方式

  <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>

Answer 1

你在这里做什么：

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

正在将 String javascript 对象指定为变量的值，因此是视图中的输出。

我通常只是将空字符串值分配给变量，但使用 "" as string 也应该有效。但如前所述，我通常只是将它们添加为空字符串：

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

对象是另一回事，我确实使用强类型:)

Vue js，使用 TypeScript 从 Vue 中的表单获取数据

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

typescript

vue.js

vue-component