Как очистить форму после отправки в vuejs

Question

Я пытаюсь очистить форму после отправки формы, но я не могу этого сделать. Вот код

<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();

    }

}

Я использую плагин vform для отправки формы. Используя Laravel в качестве бэкэнда. Данные отправляются в базу данных, но я не могу очистить форму. Пожалуйста, помогите в этом отношении. Должен ли я использовать jquery или javascript для очистки формы? Я пробовал разные способы, но не смог разобраться в проблеме.

Answer 1

Ну, это было просто, и я сделал следующий код для очистки формы.

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();


    },

после отправки формы я не использовал форму. поэтому после этого я опустошил форму.

Answer 2

Просто очистите объект формы после отправки формы.

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