Vue获取表单数据的方法

Posted 2023-05-05

参考技术A

@submit.prevent 提交阻止默认跳转
v-model.trim 去除两端空格
v-model.number 将字符串转为数值
v-model.lazy 不是立即收集，而是切换焦点后收集

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

【中文标题】Vue js，使用 TypeScript 从 Vue 中的表单获取数据

【英文标题】：Vue js, Getting data from a form in Vue using TypeScript

【发布时间】：2021-07-15 09:06:42

【问题描述】：

我目前正在尝试使用 typescript 从 Vue 的表单中获取数据，但是当我声明要使用的数据时，我会在 message geting posted 字段上发布这个数据，我不知道如何纠正这个问题，因为没有人将 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="[e-mail]"
      />

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

【参考方案1】：

你在这里做什么：

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

将String javascript 对象分配为变量的值，从而在视图中输出。

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

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

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