如何在vuejs中提交后清除表单答案

【问题标题】：How to clear form after submit in vuejs如何在vuejs中提交后清除表单
【发布时间】：2020-01-16 09:27:30
【问题描述】：

我在提交表单后尝试清空表单，但我无法执行此操作。这是代码

<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 来清除表单？我尝试了不同的方法，但我无法找出问题所在。

【问题讨论】：

你想把所有的值都改成空白吗？
是的，我只想将值更改为空白。
this.form.onSubmit(() => this.form.reset())
我使用了@submit.prevent，所以表单没有提交。
我发现这是一个非常有用的答案。很一般。 stackoverflow.com/a/47382440/5811471

标签： vue.js vuejs2

【解决方案1】：

提交表单后只需清空表单对象。

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

【讨论】：

【解决方案2】：

这很简单，我按照以下代码清空表单。

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


    },

提交表单后，我没有使用该表单。所以在这样做之后我清空了表格。

【讨论】：