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

feat: add higher-order component helper for vuelidate #825

Draft
wants to merge 1 commit into
base: next
Choose a base branch
from

Conversation

shentao
Copy link
Member

@shentao shentao commented Mar 14, 2021

What kind of change does this PR introduce? (check at least one)

  • Bugfix
  • Feature
  • Code style update
  • Refactor
  • Build-related changes
  • Other, please describe:

Does this PR introduce a breaking change? (check one)

  • Yes
  • No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

If adding a new feature, the PR's description includes:

A helper higher-order component that should make it possible to put validation rules inside the template easily instead of defining those in the wrapper component. Example usage in test-project:

// _TextInput is an input component
const TextInput = withVuelidate(_TextInput)

// in template
<TextInput v-model="value" :rules="{ required }" />

Sad part: Works but there is an infinitely recursive thing going on which makes everything super slow.

Other information:

@dobromir-hristov
Copy link
Contributor

@shentao I looked into this and if the rules are defined as computed or data properties and passed to the WithVuelidate wrapped component, there is no recursion issue. But applied on the component itself, it just does not work

@shentao
Copy link
Member Author

shentao commented Jun 30, 2021

Uh... Any idea how to solve that?

@dobromir-hristov
Copy link
Contributor

I think it's just a problem with applying a watcher to a reactive prop, defined in the template.
I did something similar today, but with array.reverse in the template. Threw the same error, fixed it by creating a computed property.

@shentao
Copy link
Member Author

shentao commented Jun 30, 2021

Could this be a vue 2.x limitation?

@dobromir-hristov
Copy link
Contributor

I think it's in both versions.

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

Successfully merging this pull request may close these issues.

None yet

2 participants