logaretm / vee-validate

✅ Painless Vue forms
https://vee-validate.logaretm.com/v4
MIT License
10.77k stars 1.26k forks source link

Some issues with ValidationProvider docs #2158

Closed SHxKM closed 5 years ago

SHxKM commented 5 years ago

Following a convo I had with @logaretm, I've been trying to dig deeper into ValidationProvider and how it might be used in cases where our errors come from the parent Form component. No dice but I (think) I've found some docs related issues. I'm very new to this library so I hope I'm not missing something here, this is also why I'm posting an issue and not submitting a PR:

slim

In Renderless, it is implied that the slim prop is used in this example:

<ValidationProvider rules="required" v-slot="{ errors }">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

<!-- Only input is rendered, the span is dropped -->
<input type="text">

But I can't see where? (I think this mistake is repeated elsewhere, too) Is this an implicit usage kind of thing?


v-slot and scope-slot

There also seems to be some inconsistencies in using v-slot vs scope-slot, like in Adding Errors Manually, where the latter is used even though the syntax is considered deprecated.


no docs on how to user backend validation (not in mounted())

Here's a scenario: we get all our errors as a dictionary/object from the backend, they follow this convention:

{
"field1name": [array_of_errs],
"field2name": [array_of_errs] // note: there are other valid fields that don't appear here
} 

Upon receiving these errors, on the parent component, we need to pass them down to the children, and have the relevant child display its own error-array, and only its own. In Adding Errors Manually, we see that we can use this.$refs.provider.applyResult inside of mounted(), but this becomes cumbersome when the event causing this error is received externally. A better example in my opinion is this scenario (how convenient, I know) - rather than just show a partial example that simply renders a static array of strings. To complicate this docs section even more, the deprecated scope-slot is used, and the fact it can't be simply replaced with v-slot because the latter only lives on components and template tags.

logaretm commented 5 years ago

Closing as this is now addressed in both v2 and v3 docs. Thanks for reporting this!