提交表单时，Vuelidate 为所有属性设置 dirty false

Question

我有一个配置了 Vuelidate 验证器的简单表单。如果 input 处于 dirty 状态，它会显示错误消息，因此当 form 第一次打开时没有错误。

但是当我点击 submit 时，我希望得到一个“清晰的”form，并且我只是打开它，但是相反，我在 [=13] 中得到了所有验证错误=].

有什么优雅的方法可以将所有 vuelidate 字段重新设置为 clear 状态，并获得 clear 表单吗？

<script>
  import {required, email} from 'vuelidate/lib/validators'

  export default {
    data() {
      return {
        email: ''
        //there could be a lot of props
      }
    },
    methods: {
      onSubmit() {
        if (!this.$v.$invalid) {
          const user = {
            email: this.email,
            //there could be a lot of props
          };

          console.log(user);

          this.email = '';
        }
      }
    },
    validations: {
      email: {required, email}
    }
  }
</script>

<template>
  <div>
    <form class="form" @submit.prevent="onSubmit">
      <div class="input">
        <label for="email">Email</label>
        <input
          :class="{ error: $v.email.$error }"
          type="email"
          id="email"
          v-model.trim="email"
          @input="$v.email.$touch()">
        <div v-if="$v.email.$dirty">
          <p class="error-message" v-if="!$v.email.email">Please enter a valid email</p>
          <p class="error-message" v-if="!$v.email.required">Email must not be empty</p>
        </div>
      </div>
      <button :disabled="$v.$invalid" type="submit">Submit</button>
    </form>
  </div>
</template>

Answer 1

经过一些研究，我发现 this.$v.$reset(); 使事情变得如此

提交表单时，Vuelidate 为所有属性设置 dirty false

Vuelidate set dirty false for all properties when form is submitted

vue.js

vuejs2

vuelidate