Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Helpers.ForEach does not work with reactive rules #1208

Open
Jacob-Oldenburg opened this issue Sep 21, 2023 · 2 comments
Open

Helpers.ForEach does not work with reactive rules #1208

Jacob-Oldenburg opened this issue Sep 21, 2023 · 2 comments

Comments

@Jacob-Oldenburg
Copy link

Describe the bug
When using helpers.forEach you lose reactivity and the rule will stay as whatever it was at the beginning rather than updating when a computed ruleset works. Using a computed as shown here does not work with helpers.ForEach.

Reproduction URL
https://codesandbox.io/s/strange-monad-84qhwv?file=/src/App.vue:974-994

The left side uses a computed with helpers.ForEach and the right side uses the same computed without the forEach to work on just one field. You'll notice that the number input controls the minlength required for both sides in the computed, however only v2$ is updating with the new rules despite the reactive dependencies for both rules1 and rules2 changing. In the silent errors you'll see if you change the min length of names to 6 only the right side updates to reflect that while the left side(the one using helpers.forEach) stays at the default 4.

Expected behavior
I would expect the minLength required rule to be used on the array side when the minLength changes as well however with the helpers.forEach it doesn't seem to be changing with a computed rule.

@kogratte
Copy link

Up. No way to validate an array. Accordingly, when using helpers.forEach, some validators like minLengthseems to not work as well.

const v2 = useVuelidate(
    computed(() => {
        return props.certAuthority
            ? {
                  $each: helpers.forEach({
                      shouldBeSignedBy: shouldBeSignedBy(props.certAuthority),
                  }),
                  minLength: minLength(1),
              }
            : {
                  minLength: minLength(1),
              };
    }),
    model
);

I don't want to use child components, as those are typically element forms, and are not available once the edition mode has been exited.

To be more precise: I have another step in my form which own the certAuth you're seeing here. Once this information has been updated, I need to validate sub elements based on this certAuth, which is the reason I won't jump into the documentation proposal using child components.

@kogratte
Copy link

Screenshot 2023-12-11 at 11 45 37

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants