V4 how to reproduce eager behaviour ?

[laferte-tech]

Hello,

EDIT: ok i found in the doc that i need to use useField, first need to learn composition API so :p

i am migrating from V3 to V4 and i have to say that i am quite lost with this new version. I'm having hard time to migrate some stuffs from v3 to V4 and i have a few questions below. For information, i'm using Quasar.

In v3, i was happy with mode="eager" but i can't reproduce it in v4.

So far, i'm stuck with this:

<Field :validateOnModelUpdate="false" v-slot="{ errorMessage,value, field }" name="email" rules="required|email">

So it's kind of lazy but not eager for sure.

For memory, eager is this:

Eager: Is a combination of aggressive and lazy, as it first validates when the user leaves the input (on blur or change) then if the input is invalid it will behave aggressively until the input is valid again and it will go back to being lazy.

Is it possible to reproduce eager in v4 ?

Second point.
In V3, i was using the vee validate rules like this (in a boot file because i'm on Quasar, but it's like a main.js) :

extend("required", { ...required, message: app.i18n.t('forms.mandatory') });

So the message was directly linked to the error (using my own translation file). From what i understand, it's now impossible to modify the vee validate rule so in V4, i did this:

configure({ generateMessage: context => { // console.log(context) if (context.rule.name ==='required') { return i18n.global.t('forms.mandatory') } else if (context.rule.name ==='email') { return i18n.global.t('forms.emailValid') } else { return The field ${context.field} is invalid; } }, });

It's working but is it ok to do it like this?

Thanks a lot for your help and for your work on this nice plugin

[laferte-tech]

Hello,

actually i'm unable to reproduce the eager behaviour with Quasar : (

In your example, you use the native v-on behaviour with
v-on="validationListeners"

but with Quasar it's not working.

In your example here :
https://codesandbox.io/s/implementing-eager-validation-with-veevalidate-7uy17?from-embed=&file=/src/App.vue:417-443

validationListeners is called at each keystroke when it's in aggressive mode. Below is my code with Quasar, and the validationListeners is not called on each keystroke and so validation is not happening (only when the field is losing the focus).

  <q-input  v-on="validationListeners"
    v-model="value"
    :error-message="errorMessage"
    :error="!!errorMessage"
  >

I tried many configurations but none worked, @logaretm maybe do you have a hint about this?

Thanks a lot for your help.

[logaretm]

It depends on the events emitted by the q-input, most components emit blur and update:modelValue so you can focus on these only.

Here is an example:

https://codesandbox.io/s/vee-validate-v4-with-quasar-framework-forked-5ti8j?file=/src/components/QInputWithValidation.vue

Note that handle change accepts a second argument to prevent validation on value change, given you configured the field to not validate on value change with useField.

[laferte-tech]

Hello,
Thanks a lot for your help, it seems to work perfectly!

And thanks again for all your work