Skip to content

Commit

Permalink
docs: update the defineField trigger info
Browse files Browse the repository at this point in the history
  • Loading branch information
logaretm committed Nov 23, 2023
1 parent 1a8a045 commit dd7bd6a
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 6 deletions.
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
<script setup>
import { useForm } from 'vee-validate';
import * as yup from 'yup';
import CustomInput from './CustomInput.vue';
const { values, errors, defineField } = useForm({
validationSchema: yup.object({
email: yup.string().email().required(),
emailComponent: yup.string().email().required(),
}),
});
const [email, emailAttrs] = defineField('email', state => {
return {
// validate aggressively as long as there are errors on the input
validateOnInput: state.errors.length > 0,
validateOnModelUpdate: state.errors.length > 0,
};
});
</script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const { values, errors, defineField } = useForm({
});
const [email, emailAttrs] = defineField('email', {
validateOnInput: true,
validateOnModelUpdate: false,
});
</script>

Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/guide/composition-api/getting-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -113,9 +113,9 @@ Here is a full running example:

<Repl files={{ 'App.vue': 'CompositionInputBindsBasic02' }} client:only />

Notice as you blur the input, the validation is then triggered and the errors are populated. By default `defineField` optimizes for lazy validation, meaning the validation will be triggered on `change` and on `blur` events.
Notice as you type into the input, the validation is then triggered and the errors are populated. By default `defineField` optimizes for aggressive validation, meaning the validation will be triggered whenever the model changes.

You can change that behavior. For example, you can make it "aggressive" by passing a configuration to `defineField` to validate `input` events.
You can change that behavior. For example, you can make it "lazy" by passing a configuration to `defineField` to disable validation on model updates with `validateOnModelUpdate` config.

<Repl files={{ 'App.vue': 'CompositionInputBindsBasic03' }} client:only />

Expand Down

0 comments on commit dd7bd6a

Please sign in to comment.