在表单按钮上单击成功，表单验证再次触发

Question

希望这是一个新手问题。我正在使用 Vuelidate 来验证我的表单并且表单验证工作正常，当“发送电子邮件”按钮成功时 clicked.However，系统没有显示成功消息，而是显示所有表单控件都有错误（这是因为我已将名称、电子邮件、消息控件绑定到它们相应的空数据元素）。我错过了什么？我该如何解决这个问题？

Contact.vue

<template>
    <div>
    <section class="slice slice-lg" id="sct_contact_form">
          <div class="container">
            <div class="mb-5 text-center">
              <span class="badge badge-soft-info badge-pill badge-lg">
                Contact
              </span>
              <h3 class=" mt-4">Send us a message</h3>
            </div>
            <div class="row justify-content-center">
              <div class="col-lg-8">
                <form>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label class="form-control-label">Name</label>
                        <input class="form-control" type="text" placeholder="Name" v-model="user.name" id="name" name="name" :class="{ 'is-invalid': submitted && $v.user.name.$error }" >
                        <div v-if="submitted && !$v.user.name.required" class="invalid-feedback">Name is required</div>
                      </div>
                    </div>                
                  </div>
                  <div class="row align-items-center">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label class="form-control-label">Email</label>
                        <input class="form-control" type="email" placeholder="email@example.com" 
                        v-model="user.email" id="email" name="email" :class="{ 'is-invalid': submitted && $v.user.email.$error }" >
                         <div v-if="submitted && $v.user.email.$error" class="invalid-feedback">
                            <span v-if="!$v.user.email.required">Email is required</span>
                            <span v-if="!$v.user.email.email">Email is invalid</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label class="form-control-label">Message</label>
                        <textarea class="form-control" data-toggle="autosize" placeholder="Tell us a few words ..." rows="3" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 96.9922px;" 
                        v-model="user.message" id="message" name="message" :class="{ 'is-invalid': submitted && $v.user.message.$error }" ></textarea>
                        <div v-if="submitted && $v.user.message.$error" class="invalid-feedback">
                            <span v-if="!$v.user.message.required">Message is required</span>
                            <span v-if="!$v.user.message.minLength">Message must be at least 6 characters</span>
                        </div>  
                      </div>
                    </div>
                  </div>
                  <div class="text-center mt-4">
                    <button type="button" class="btn btn-dark rounded-pill" v-on:click="SendEmail()">Send your message</button>                
                    <span class="d-block mt-4 text-sm">We'll get back to you in 24-48 h.</span>
                    <div v-if="submitted" class="valid-feedback">
                        <span v-if="!$v.user.name.$error && !$v.user.email.$error && !$v.user.message.$error">Your email was send successfully. We'll get back to you in 24-48 h.</span>                    
                    </div>
                  </div>              
                </form>
              </div>
            </div>
          </div>
        </section>
      </div>
    </template>

import { Email } from '../api/email.js';
import { required, email, minLength, sameAs } from "vuelidate/lib/validators";

export default {
  name: "Contact",
  components:{
  },
  data() {
      return {
          user: {
              name: "",
              email: "",
              message: ""
          },
          submitted: false
      };
  },
  validations: {
      user: {
          name: { required },
          email: { required, email },
          message: { required, minLength: minLength(6) }
      }
  },
  methods: {
    SendEmail() {
      this.submitted = true;
      this.$v.$touch();
      if (this.$v.$invalid) {
          return;
      }

      var nameWithEmailText="Email message from: "+ this.user.name + "\nEmail message: " + this.user.message;
      var subject="Email from contact us page in common membership website";
      Meteor.call('email.send', this.user.email, subject, nameWithEmailText); 
      this.user.name='';
      this.user.email='';
      this.user.message=''; 
    }
  }
}

Answer 1

您应该等待 Meteor.call() 完成，然后 reset the validation state。

例如

Meteor.call('email.send', this.user.email, subject, nameWithEmailText, (error, result) => {
  this.user.name = ''
  this.user.email = ''
  this.user.message = ''

  this.$v.$reset()
})

在表单按钮上单击成功，表单验证再次触发

On form button click success, form validations fire again

vue.js

meteor

vuelidate