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

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

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

Answer 2

很简单，我做了下面的代码来清空表单。

yourSegment.setTitleTextAttributes( [NSAttributedString.Key.foregroundColor: UIColor.white], for: .selected)

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

在Vue.js中提交后如何清除表格

2 个答案: