CODEWITHSUNDEEP
javascripthtmlformsvue.jsvuejs3
PeopleCallMeLucifer
PeopleCallMeLucifer

Reputation: 45

html form returns empty objects instead of input data| vue

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

Upvotes: 0

Views: 93

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

Upvotes: 4

Related Questions