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

【问题标题】：html form returns empty objects instead of input data| vuehtml 表单返回空对象而不是输入数据| 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=''
    },
  },
  
}

【问题讨论】：

标签： javascript html forms vue.js vuejs3

【解决方案1】：

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

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

【讨论】：