Fix clash between v-bind="field" and v-model when using vee-validate.

[gertjanjansen]

I noticed that VeeValidate recommends to not use v-bind="field" combined with v-model, here: https://vee-validate.logaretm.com/v4/api/field/.

Due to the way BaseInput is set up, it's not possible to use a v-bind, because the BaseInput is always setting v-model on the input internally.

It would be nice if we could do something like this:

<Field v-slot="{ field, errorMessage }" name="email">
  <BaseInput
    icon="lucide:mail"
    v-bind="field"
    :error="errorMessage"
    type="email"
    label="E-mail address"
  />
</Field>

Instead of this:

<Field
  v-slot="{ field, errorMessage, handleChange, handleBlur }"
  name="email"
>
  <BaseInput
    icon="lucide:mail"
    :model-value="field.value"
    :error="errorMessage"
    type="email"
    label="Email address"
    @update:model-value="handleChange"
    @blur="handleBlur"
  />
</Field>

I believe a possible solution is to disable the v-model in BaseInput when v-bind is being used. I've solved it by checking if a props.modelValue is being set. Although that might be a bit hacky solution. Please let me know if you have other ideas. I might need to spend a bit more time on it.

I also need to do a bit more testing on it, but wanted to share it with you guys.

[stafyniaksacha]

Hello @gertjanjansen

Thanks for getting into this! We've planned to refactor components using v-model to use new vue defineModel with it new local property, this will allow us to remove the required of the modelValue attributes.

Using v-bind="field" will set modelValue and onUpdateModelValue properties, so it acts as a v-model directive, that's why it's not recommended to use both, they conflict.

Also, a change in this behavior has been changed recently, we have to ensure it work with: logaretm/vee-validate#4283

[gertjanjansen]

Thanks @stafyniaksacha. I wasn't aware of defineModel and it's local property, but on first sight it looks like a good solution. Better than my hacky attempt, for sure.
In the meantime I'll disable the v-model in my own overridden input component, because I'll use v-bind=field everywhere.

[gertjanjansen]

@stafyniaksacha what is the status of this? It looks like the new Tairo / Shuriken version doens't solve this yet, am I right?

[gertjanjansen]

Btw, I believe the clash is also caused by v-bind="field" acting as an onChange listener, which interferes with v-model.

[gertjanjansen]

@stafyniaksacha any update on this? useModel is supported now that vue 3.4 has been released. It's not being used yet in Shuriken as far as I can see.

[stafyniaksacha]

@stafyniaksacha any update on this? useModel is supported now that vue 3.4 has been released. It's not being used yet in Shuriken as far as I can see.

Yes ! We are going to use the new defineModel that has the behavior you expect (multiple tries has been made though 3.4.0 beta)
This will be included in v2 which we plan to release in the next week!

[gertjanjansen]

That's great! Looking forward to it. Op do 11 jan 2024 om 13:34 schreef Sacha Stafyniak ***@***.***

…

: @stafyniaksacha <https://github.com/stafyniaksacha> any update on this? useModel is supported now that vue 3.4 has been released. It's not being used yet in Shuriken as far as I can see. Yes ! We are going to use the new defineModel that has the behavior you expect (multiple tries has been made though 3.4.0 beta) This will be included in v2 which we plan to release in the next week! — Reply to this email directly, view it on GitHub <#27 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAK44YNN4CYQMQT3SWMJTXLYN7L4HAVCNFSM6AAAAAA2YUBNV6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBXGA3DQOJSGM> . You are receiving this because you modified the open/close state.Message ID: ***@***.***>