Vuelidate проверяет на странице рендеринга

Question

В нашем приложении Vue мы используем Vuelidate для проверки формы. Это поведение, при котором поля проверяются так же, как визуализируется страница, когда она должна проверяться только при отправке формы, как указано в документах с использованием $ v.invalid и $ v.touch () при обработке отправки. Странно то, что на некоторых страницах, где это реализовано, это работает хорошо. Но иногда, на других страницах, это будет проверяться так, как я не хочу, но я не вижу, где я могу обойти это. Кто-нибудь прошел через это? Некоторые фрагменты кода.

 <input
      id="name"
      type="text"
      name="name"
      v-model="form.name"
      :class="{
        invalid:
        !$v.form.name.required || !$v.form.name.minLength,
       }"
 />

Мой объект данных и проверки

data: {
      form: {
      name: '',
      birth: '',
      parentage: '',
    }
 },
 validations: {
   form: {
      name: { required, minLength: minLength(4) },
 }

Метод отправки

async submit() {
  this.$v.touch();
  if (!this.$v.$invalid) {
    console.log('Submit');
  }
}

Answer 1

Когда страница визуализируется, vuelidate запустит все проверки формы. Вот как работает vuelidate.

Вам нужно проверить форму на наличие грязных, а также на то, что она недействительна.

$v.$dirty() && $v.$invalid()

Когда вы используете $v.$touch() или $v.$reset(), vuelidate помечает форму как грязную .

Прочтите https://vuelidate.js.org/#sub -v-значения , чтобы понять важность этих методов.