How to clear form after submit in vuejs

Question

I am trying to empty the form after it submits form but I am unable to do this. Here is the code

<form class="form-horizontal" @submit.prevent="addtodirectory" id="form-directory">
         <div class="model-body">   
            <div class="card-body">
              <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">Name</label>
                <div class="col-sm-10">
                 <input v-model="form.name" type="text" name="name"
                      class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
                     <has-error :form="form" field="name"></has-error>
                </div>
              </div>
              <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">Address</label>
                <div class="col-sm-10">
                 <textarea v-model="form.address" type="text" name="address"
                      class="form-control" :class="{ 'is-invalid': form.errors.has('address') }"></textarea>
                     <has-error :form="form" field="address"></has-error>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-sm-2 col-form-label">Profession</label>
                <div class="col-sm-10">
                 <input v-model="form.profession" type="text" name="profession"
                      class="form-control" :class="{ 'is-invalid': form.errors.has('profession') }">
                     <has-error :form="form" field="profession"></has-error>
                </div>
              </div>
               <div class="form-group row">
                <label class="col-sm-2 col-form-label">Contact Number</label>
                <div class="col-sm-10">
                 <input v-model="form.contact_number" type="text" name="contact_number"
                      class="form-control" :class="{ 'is-invalid': form.errors.has('contact_number') }">
                     <has-error :form="form" field="contact_number"></has-error>
                </div>
              </div>
               <div class="form-group row">
                <label class="col-sm-2 col-form-label">City</label>
                <div class="col-sm-10">
                 <input v-model="form.city" type="text" name="city"
                      class="form-control" :class="{ 'is-invalid': form.errors.has('city') }">
                     <has-error :form="form" field="city"></has-error>
                </div>
              </div>
               <div class="form-group row">
                <label  class="col-sm-2 col-form-label">State</label>
                <div class="col-sm-10">
                 <select v-model="form.state" type="text" name="state"
                      class="form-control" :class="{ 'is-invalid': form.errors.has('state') }">
                     <has-error :form="form" field="state"></has-error>
                 <option value="Rajasthan">Rajasthan</option>
                 <option value="Gujrat">Gujrat</option>

                 </select>
                </div>
              </div>


            </div>
            <!-- /.card-body -->
            <div class="card-footer">
              <button type="submit" class="btn btn-success">Submit</button>
              <button type="submit" class="btn btn-default float-right">Cancel</button>
            </div>
            <!-- /.card-footer -->
         </div>
          </form>

<script>
export default {
  data() {
    return {
       news:{},
        form: new Form({
        name : '',
        address:'',
        profession:'',
        city:'',
        state:''
      })
    }
  },
  methods: {  addtodirectory() {
      this.$Progress.start();
      this.form.post('api/addtodirectory');
      Toast.fire({
         type: 'success',
        title: 'Directory Updated successfully'
          })
       $('#form-directory input[type="text"]').val('');
      this.$Progress.finish();

    }

}

I am using vform plugin to submit the form. Using Laravel as backend. The data is being submitted in database but I am not able to clear the form. please help in this regarding. Should I use jquery or javascript to clear the form? I tried different ways but I could not figure out the problem.

I find this a very helpful answer. Very generic. https://stackoverflow.com/a/47382440/5811471 — da-chiller, Jan 17 '20 at 15:10

score 0 · Answer 1 · answered Jan 16 '20 at 19:53

0

Simply empty your form object after form submit.

form: new Form({
    name : '',
    address:'',
    profession:'',
    city:'',
    state:''
  })

answered Jan 16 '20 at 19:53

Anuj Gupta

11
3

score 0 · Accepted Answer · answered Jan 18 '20 at 09:54

Well it was simple and I did following code for emptying the form.

addtodirectory(event) {
      this.$Progress.start();
      this.form.post('api/addtodirectory');
    //  document.getElementById("form-directory").reset();
     console.log('durgesh');
      // document.getElementsByName('name').value = '';
      Toast.fire({
         type: 'success',
        title: 'Directory Updated successfully'
          })

        this.form.name = "";
        this.form.profession ="";
        this.form.address="";
        this.form.city = "";
        this.form.state = "";



      this.$Progress.finish();


    },

after submitting the form I did not used the form. so after doing this I emptied the form.

score 0 · Answer 3 · answered Jun 09 '22 at 04:57

0

Or in a one-liner:

Object.keys(form).forEach(v => form[v] = "")

instead of:

this.form.name = "";
this.form.profession ="";
this.form.address="";
this.form.city = "";
this.form.state = "";

answered Jun 09 '22 at 04:57

thiebo

1,339
1
17
37

How to clear form after submit in vuejs

3 Answers3