html form returns empty objects instead of input data| vue

Question

I'm trying to send some data fro my component to a view so the view can save the data in a JSON file. I'm pretty sure the view works fine because I've tried to console log the data in the component and it was empty and the JSON file creates an empty JSOn object.

<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=''
    },
  },
  
}

Boussadjra Brahim · Accepted Answer · 2021-08-22 10:33:02Z

4

You've to bind the form input to the data property using v-model directive like:

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

answered Aug 22, 2021 at 10:33

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

html form returns empty objects instead of input data| vue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related