Vuelidate 重置特定字段，以便 $error 标志为 false答案

【问题标题】：Vuelidate reset specific field so that $error flag is falseVuelidate 重置特定字段，以便 $error 标志为 false
【发布时间】：2020-05-16 01:48:37
【问题描述】：

使用 Vuelidate，您可以使用 this.$v.$reset() 重置验证错误。在此 Codepen example 中，重置使用 Vuetify 组件的 lastName 字段有效 - $invalid 为 true，而 $error 设置为 false。

重置firstName 的常规文本输入时，它不起作用，因为$error 标志仍然为真。如何修改文本输入，使调用 reset 时 $error 为 false？

我也尝试过this.$nextTick(() => {...})，但这也不起作用。

Vue.use(window.vuelidate.default)
var validationMixin = window.vuelidate.validationMixin
const {
  maxLength,
  required
} = window.validators

new Vue({
  el: '#app',
  mixins: [validationMixin],
  data: () => ({
    form: {
      firstName: '',
      lastName: ''
    }
  }),
  validations: {
    form: {
      firstName: {
        required, maxLength: maxLength(2)
      },
      lastName: {
        required, maxLength: maxLength(2)
      },
    }
  }
})

input.raw {
  border: solid;
}

.is-invalid {
  border-color: #FF5252 !important;
}

<html>
  <head>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/validators.min.js"></script>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/vuelidate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  </head>
  <body>
    <div id="app">
            <label for="firstName">First Name</label>
            <input
              v-model="form.firstName"
              id="firstName"
              class="raw"
              :class="{ 'is-invalid': $v.form.firstName.$error }"
              type="text"
              width="100%"
              :oninput="$v.form.firstName.$touch()"
              :onblur="$v.form.firstName.$touch()"
            />
            <button @click="$v.form.firstName.$touch()">
              $touch
            </button>
            <button @click="$v.form.firstName.$reset()">
              $reset
            </button>
            <pre>{{ $v.form.firstName }}</pre>
    </div>
  </body>
</html>

【问题讨论】：

不知道为什么，但是当您使用 @input 和 @blur 而不是 :oninput 和 :onblur 时，似乎会有所不同。

标签： vue.js vuetify.js vuelidate

【解决方案1】：

在您的示例中，您使用的是 oninput 和 onblur HTML 属性，但在 Vue 中，您应该使用 @input(v-on:input) 和 @blur(v-on:blur) 绑定。详情请见docs。

用 Vue 绑定替换 HTML 属性使您的示例正常工作：

Vue.use(window.vuelidate.default)
var validationMixin = window.vuelidate.validationMixin
const {
  maxLength,
  required
} = window.validators

new Vue({
  el: '#app',
  mixins: [validationMixin],
  data: () => ({
    form: {
      firstName: '',
      lastName: ''
    }
  }),
  validations: {
    form: {
      firstName: {
        required, maxLength: maxLength(2)
      },
      lastName: {
        required, maxLength: maxLength(2)
      },
    }
  }
})

input.raw {
  border: solid;
}

.is-invalid {
  border-color: #FF5252 !important;
}

<html>
  <head>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/validators.min.js"></script>
    <script src="https://unpkg.com/vuelidate@0.6.1/dist/vuelidate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  </head>
  <body>
    <div id="app">
            <label for="firstName">First Name</label>
            <input
              v-model="form.firstName"
              id="firstName"
              class="raw"
              :class="{ 'is-invalid': $v.form.firstName.$error }"
              type="text"
              width="100%"
              @input="$v.form.firstName.$touch()"
              @blur="$v.form.firstName.$touch()"
            />
            <button @click="$v.form.firstName.$touch()">
              $touch
            </button>
            <button @click="$v.form.firstName.$reset()">
              $reset
            </button>
            <pre>{{ $v.form.firstName }}</pre>
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

这是来自 Vuelidate 的问题，它们必须被修复，在这个位置你不能重置表单并给出相同的（坏的）行为，你可以通过路由器重新渲染

// re render component for reset all fileds
this.$router.go(0)

【讨论】：

如果这是一个 Vuelidate 错误，请考虑添加指向相关 Github 问题的链接。