审核重置特定字段，以便$ error标志为false

2024-05-18 • 问答

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

在重置firstName的常规文本输入时，由于$error标志仍然为true，因此无法正常工作。如何在调用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,}
  }
})

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>

在您的示例中，您使用的是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,}
  }
})

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>

这是来自Vuelidate的问题，必须将其修复，在此位置您不能重置表格并给出可以由路由器重新呈现的相同（严重）行为

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

审核重置特定字段，以便$ error标志为false

mj40778 回答：审核重置特定字段，以便$ error标志为false

大家都在问