Is there any way to avoid :modelValue="value" @update:modelValue="handleChange" when using custom components

[lk77]

Hello,

when i'm using custom components and validating it with vee validate,
i need to map the value of vee validate to :modelValue and set the onUpdate:modelValue handler to the handleChange method,
so for every custom component i end up with :

:modelValue="value" @update:modelValue="handleChange"

and i'm searching a way to avoid that or reduce it

One solution i come up with is make a global function $value :

$value(value, handleChange) {
    return {
        'modelValue': value,
        'onUpdate:modelValue': handleChange
    }
},

and using like that :

<my-component v-bind="$value(value, handleChange)"/>

but i'm not sure if it's a viable solution, it does shorten it but it becomes less obvious what it does,
i was also thinking to create a directive like v-value="{ value, handleChange }"

what do you think ?

thanks

[logaretm]

I think that could be inefficient since it would recreate the binding object on each re-render but it could be negligible. Feel free to measure and decide.

I'm not sure how you are using vee-validate, are you using components or composition API here? In your that case I think it would be better if you use the composition API with v-model on the value prop as then you won't have to use handleChange.

[lk77]

I'm using option api, i think that for know i will keep the :modelValue="value" @update:modelValue="handleChange" syntax,
someone suggested writable computed property, but i don't know how to get the handleChange within the set() and it will be more verbose any way

I don't know if doing v-model="value" works with option api