html 表单返回空对象而不是输入数据| Vue

Posted 2023-02-22

【中文标题】html 表单返回空对象而不是输入数据| Vue

【英文标题】：html form returns empty objects instead of input data| vue

【发布时间】：2021-10-23 02:05:33

【问题描述】：

我正在尝试将一些数据从我的组件发送到视图，以便视图可以将数据保存在 JSON 文件中。我很确定视图可以正常工作，因为我尝试通过控制台记录组件中的数据并且它是空的，并且 JSON 文件会创建一个空的 JSOn 对象。

<template>
   <form @submit="onSubmit" class="add-form">

        <div class="form-control">
        <label>Datum početka</label>
        <input 
        type="text" name="datumStart"
         placeholder="dd mm YYYY"  required/>
        </div>

        <div class="form-control">
        <label>Datum zavržetka</label>
        <input 
        type="text" name="datumEnd"
         placeholder="dd mm YYYY"/>
        </div>

        <div class="form-control">
        <label>Unesi serijsku broj uređaja</label>
        <input 
          type="number" name="broj"  required/>
        </div>
        
        <input type="submit" value="Zakaži Experiment" 
        class="btn"/>

   </form>
</template>

export default 
    name:'NoviExperimentForma',
    data()
      return
        datumStart:'',
        datumEnd:'',
        broj:'',
      
    ,
    methods: 
    onSubmit(e) 
      e.preventDefault()
      
      const newEx= 
        datumStart: this.datumStart,
        datumEnd: this.datumEnd,
        broj: this.broj,
      
      
      console.log(newEx)
      this.$emit('add-experiment', newEx)

      this.datumStart=''
      this.datumEnd=''
      this.broj=''
    ,
  ,
  

【参考方案1】：

您必须使用v-model 指令将表单输入绑定到数据属性，例如：

  <input 
    type="text" name="datumStart" v-model="datumStart"
     placeholder="dd mm YYYY"  required/>