Vue项目中HTML表单提交返回空对象而非输入数据问题咨询

问题根因 #

你的表单输入项没有和Vue实例data中定义的变量做双向绑定，输入的内容不会同步到datumStart、datumEnd、broj三个变量中，因此提交时读取到的都是初始空值。

修复方案 #

给每个<input>标签添加v-model绑定对应变量即可，修改后的template代码如下：

<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
         v-model="datumStart"
         />
        </div>

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

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

   </form>
</template>

修改后输入内容提交，newEx对象就能正常读取到你输入的值，传递给父视图后写入JSON文件的内容也会正常。

内容的提问来源于stack exchange，提问作者PeopleCallMeLucifer