Vue 3 + Vuelidate: правило SameAs не является реактивным и позволяет избежать POST формы (Inertia + Laravel) ⇐ Javascript

[Anonymous]

введите описание изображения здесь
Я создаю приложение с помощью Laravel + Inertia + Vue 3 и использую Vuelidate для проверки клиента в форме «создать пользователя». Даже когда я ввожу один и тот же пароль в поля «Пароль» и «Подтверждение пароля», Vuelidate всегда помечает подтверждение как недействительное, и форма никогда не отправляется (никакой POST не наблюдается). Ошибка валидатора выглядела примерно так: «confirm_password и другие должны совпадать».
Контекст/стек:

• Бэкэнд: Laravel (правила проверки в контроллере).
• Фронтенд: Vue 3 (настройка сценария) + @vuelidate/core + @vuelidate/validators.
• Инерция + аксиомы для POST.
• Разработка с помощью Docker Compose (проблема исключительно на стороне клиента).

Соответствующий код (кратко):
Контроллер Laravel (для справки): $request->validate([ 'name' => ['required'], 'username' => ['required'], 'email' => ['required', 'email'], 'password' => ['required', 'string', 'min:8', 'confirmed'], 'password_confirmation' => ['required', 'string'], // ... ]);
Фрагмент Vue (правила, которые я изначально использовал): import { SameAs, требуемый, minLength, требуемый } из '@/Utils/i18n-validators.js'
const Rules = { form: { пароль: { требуемый Если: требуемый (modal.form.change_password || !modal.editMode), minLength: minLength (8) }, пароль_подтверждение: { требуемый Если: требуемый Если (модальный.форма.изменение_пароля) || !modal.editMode), SameAs: SameAs(modal.form.password), // { v$.value.form.$touch() if (v$.value.form.$invalid) { // показывать ошибку и НЕ вызывать axios.post } else { axios.post(route('users.store'), modal.form)... }
Что я пробовал и обнаружил:

• Используя console.log, я подтвердил, что modal.form.password и modal.form.password_confirmation содержат одно и то же значение, когда набрано, но v$.value.form.password_confirmation.$errors по-прежнему показывает ошибку.
• Я обнаружил, что передача значения непосредственно в SameAs (sameAs(modal.form.password)) приводит к тому, что Vuelidate фиксирует значение во время создания правила и не выполняет повторную оценку при изменении входных данных.
• Исправление, которое сработало для меня, заключалось в том, чтобы пройти функции/замыкания, поэтому Vuelidate динамически пересчитывает: requireIf: requireIf(() => modal.form.change_password || !modal.editMode) SameAs: SameAs(() => modal.form.password)
• Я также преобразовал другие варианты использования requireIf в функции, например requireIf(() => modal.editMode), requireIf(() => modal.form.roles.length < 1) и т. д.

Другие подробности:

• Кнопка «Сохранить» является компонентом PrimaryButton. Сначала @click не достиг внутренней , потому что компонент не пересылал $attrs/listeners; Я исправил PrimaryButton, добавив v-bind="$attrs" во внутренний и явно установив type="button" в нижнем колонтитуле:
  Save
• После применения SameAs(() => modal.form.password) и перекомпиляции ресурсов проверка клиента перестала блокироваться, когда значения соответствует.

Конкретные вопросы:

• Является ли использование SameAs(() => modal.form.password) правильным/рекомендуемым подходом с Vuelidate + Vue 3, чтобы сравнение оставалось реактивным? Есть ли лучшая или более идиоматическая альтернатива?
• Есть ли рекомендации или шаблоны для организации зависимых правил (requiredIf) с реактивными значениями в setup(), чтобы они оставались надежными и читаемыми?
• Практики, позволяющие избежать слишком строгой проверки на стороне клиента, блокирующей отправку необязательных полей (например, отчетов)? Следует ли оставлять некоторые проверки только на серверной части?
• Мысли о временном предоставлении глобальных функций отладки (window.__test_store) и использовании console.log для быстрой отладки в приложении Inertia/Vue3/Vuelidate — приемлемая быстрая практика или есть лучший рабочий процесс разработки?

Подробнее здесь: https://stackoverflow.com/questions/798 ... mulario-in