Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useVuelidate() does not update after changing nested validation rules

See original GitHub issue

I use useVuelidate() from vuelidate-next (composition API) to collect all validations from nested components.

In parent component: const v$ = useVuelidate()

The problem is that when rule validations in nested components change, the v$ in the parent component does not update. Why isn’t it reactive?

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

dobromir-hristovcommented, Jul 21, 2021

I’m having a similar issue. but with nested objects. here is a re-creation of the error.

Your rules must match the structure of the form state.

You are nesting form inside, which you shouldn’t

1reaction

dobromir-hristovcommented, Jul 1, 2021

The rules are probably not getting updated, because that is done only once at the moment we call useVuelidate, so we pass the entire validation structure to the parent. I wonder if we can replace that efficiently…

Top Results From Across the Web

Advanced usage - Vuelidate

When using useVuelidate , Vuelidate will collect all validation $errors and $silentErrors ... Create a new, nested component with its own validation rules....

How to use vuelidate with vuetify 2 for nested data? Getting ...

$invalid will always return true even when user.no_nome is not empty. How can i make the validation works for user.no_nome and any other...

Vuelidate | A Vue.js model validation library

Simple, lightweight model-based validation for Vue.js. ... You can specify when input becomes dirty by using appropriate event on your input box.

Advanced Examples | Vuelidate-error-extractor - GitHub Pages

Nested objects with $each. When you need to validate a nested set of objects, you can use the $each config keyword inside Vuelidate...

A Guide To Vue 3 Form Validation - Vuelidate Tutorial

Vue Form Validation is an essential part of any form system. ... this rules variable has to update when its dependencies change.