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

Question

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

但是，当我单击时，submit我希望得到一个“clear” 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();使得事情