From 034f0c72e070d8d9e81030d5fe9fa9f7f5f7eda8 Mon Sep 17 00:00:00 2001 From: Abdelrahman Awad Date: Mon, 11 Oct 2021 23:42:46 +0200 Subject: [PATCH] docs: added file input binding note closes #3522 (#3523) --- docs/content/api/field.md | 16 +++++++++++++++- docs/content/guide/components/validation.md | 14 +++++++++++--- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/docs/content/api/field.md b/docs/content/api/field.md index 613745fa9..47c6f833f 100644 --- a/docs/content/api/field.md +++ b/docs/content/api/field.md @@ -79,7 +79,21 @@ The `as` prop is very easy to use but also limited as you cannot render a group ``` -The most crucial part of rendering fields with `v-slot` is that you **must bind the `field` object to your input element/input**, the `field` object contains all the attributes and listeners required for the field to be validated, this is done automatically if you are using the `as` prop. +The most crucial part of rendering fields with `v-slot` is that you **bind the `field` object to your input element/input**, the `field` object contains all the common attributes and listeners required for the field to be validated, this is done automatically if you are using the `as` prop. + + + +When rendering File inputs and custom components, binding the `field` object may not be a good idea in these cases as generally you need to pick the suitable attributes that you should bind. In the case of `input[type="file"]` you could do something like this: + +```vue + + + +``` + +This is because the file input doesn't work with two-way binding since you cannot really force pick a file from a user's device. Custom components may emit different events and may have additional requirements for two-way binding to work. You can check the [UI Libraries](/examples/ui-libraries) section for a few examples on how to do that. + + When using `v-slot` on the `Field` component you no longer have to provide an `as` prop and then it will become a renderless component. diff --git a/docs/content/guide/components/validation.md b/docs/content/guide/components/validation.md index dff682e72..8460b4082 100644 --- a/docs/content/guide/components/validation.md +++ b/docs/content/guide/components/validation.md @@ -363,11 +363,19 @@ You can also specify if a `handleChange` call should trigger validation or not b When applying `v-bind="field"` to a Vue component, be careful that the listeners will both be applied for Vue and native DOM events, meaning you might trigger validation unintentionally. -It is recommended that you listen to the proper events when using `v-bind` with custom components, the following sample uses `modelValue` events. +An example of that could be `input[type="file"]` inputs, because you cannot bind the `value` attribute to a file instance which means two-way binding won't work there. In that case, only listing to handful of events makes more sense: ```vue - - + + + +``` + +For custom components, it is recommended that you listen to the proper events when using `v-bind` with custom components, the following sample uses `modelValue` events. + +```vue + + ```