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

我目前正在尝试使用typescript从Vue中的表单获取数据，但当声明我将使用的数据时，这些数据会被发布到字段中，我不知道如何更正，因为没有人将Vue与typescript一起单独使用，所以我无法找到解决方案。这是组件的代码，我非常感谢您提供有关如何使用该组件的帮助停止此操作或以其他方式声明数据

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

阿尤达门酒店
与公认会计准则I.A.P.相关的合同
阿尤达·德马内拉数字公司。
第1部分：阿尤达群岛
阿尤达营养公司
阿尤达医学院
阿尤达牙科医院
阿尤达康复中心
阿尤达·康塔纳托利亚酒店
Paso 2：接触信息入口
名义
科雷奥电子公司
电传
Paso 3：描述阿尤达的必要性
第四部分：阿尤达请求的环境

*我们的环境要求是公认会计准则的一部分
联络秘书处。

从“vue”导入{defineComponent}；
导出默认定义组件({
姓名：“帮助表格”，
数据（）{
返回{
秘书：字符串，
名称：字符串，
科雷奥：弦，
电话号码，
门萨杰：弦，
}},
方法：{
postForm:function（）{
log（{seccion:this.seccion，nombre:this.nombre，correo:this.correo，telefono:this.telefono}）；
},
},
});

你在这里做什么：

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

正在将

字符串

javascript对象指定为变量的值，从而在视图中输出

我通常只是将空字符串值分配给变量包，但使用

“”作为字符串也应该有效。但如前所述，我通常只是将它们添加为空字符串：

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

对象是另一回事，我确实使用了强类型：）