Vuelidate reset специфицирует поле c, так что флаг $ error равен false - PullRequest
2 голосов
/ 30 января 2020

Используя Vuelidate, вы можете сбросить ошибки проверки, используя this.$v.$reset(). В этом примере Codepen выполняется сброс поля lastName, в котором используется компонент Vuetify, - $invalid имеет значение true, в то время как $error имеет значение false.

При сбросе обычного ввода текста для firstName это не работает, поскольку флаг $error все еще имеет значение true. Как я могу изменить ввод текста, чтобы $ error был ложным при вызове reset?

Я также пытался 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;
}

  
    
    
    
  
  
    
            
            
            
            
            {{ $v.form.firstName }}
...