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

Question

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

但是当我点击CCD_ 5时；清除"；form，我只是打开它，但相反，我在input中得到了所有的验证错误。

有没有什么优雅的方法可以再次将所有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();可以使东西