SetCustomValidity применяется только при 2-м щелчке
У меня есть приложение Vue, в котором есть следующая логика:
if (
this.registration.user.password !==
this.registration.user.password_confirmation
) {
console.info('check')
document
.getElementById('password_confirmation')
.setCustomValidity('Passwords do not match')
}
Эта логика находится внутри метода registerUser, который появляется в <form ... @submit = "registerUser">. Я заметил, что когда я нажимаю кнопку отправки, когда два пароля не равны, в первый раз ничего не происходит, но в журналах я все еще вижу напечатанную «проверку». Второй раз, когда я нажимаю кнопку отправки, я получаю сообщение об ошибке проверки.
Кто-нибудь знает, что здесь не так? Почему эта заметка появляется второй раз?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вероятно, это связано с тем, что ваша DOM не подвергалась повторному рендерингу перед передачей в ваш метод setCustomValidity. В зависимости от того, есть ли у вас состояние, возможно, Vue еще не обновил его состояние.
Во-первых, вы должны переключить ваш document.getElementById на $refs, как описано здесь: https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements
Итак, это может выглядеть примерно так
<base-input ref = "passwordConfirmation"></base-input>
а затем вы выбираете свой элемент с помощью
this.$refs.passwordConfirmation
Одно это может решить проблему.
Если этого недостаточно, вы также можете сжать
await this.$nextTick()
перед вашим состоянием. Таким образом, вы дождетесь, пока Vue обновит свое состояние, прежде чем продолжить.
Конечно, может быть более обычный способ сделать это, не полагаясь на nextTickвзломать, но здесь все сводится к логике вашего кода, и нам потребуется ее больше.
Хорошей чистой альтернативой является использование пакета vee-validate, который поможет вам сделать более краткие и лучше структурированные проверки интерфейса: https://vee-validate.logaretm.com/v3/guide/rules.html#confirmed
Чтобы ответить на последнюю часть вашего вопроса: это происходит второй раз, потому что Vue обновляет его состояние при втором запуске.
Здесь нам понадобится немного минимальный воспроизводимый пример или, по крайней мере, больше кода, чтобы двигаться дальше. Некоторые результаты отладки vue devtools тоже могут быть полезны!
Эй, спасибо за ответ! К сожалению, использование refs и nextTick не помогло, и я все еще получаю ошибку проверки только при втором щелчке