Question: v-model changes since 0.7.0 in autocomplete

[Nemesis19]

Oruga version: 0.8.2 Vue version: 3.3.13

This is more a question than a issue per se.

I'm using vee-validate with o-autocomplete like this, to have a select of classes, in these case Organization Typescript Class.

<Field
name="organization"
:initial-value="organization"
type="string"
v-slot="{ field, errorMessage }">
<o-field
    :message="errorMessage"
    :variant="errorMessage ? 'danger' : undefined">
    <template #label>
        Organizzazione *
    </template>
    <o-autocomplete
        rounded
        :readonly="!editable"
        :data="organizations"
        v-model="organization"
        placeholder="Organizzazioni..."
        @select="(option: Organization) => user!.organization = option"
        @input="onSearchOrganization"
        field="name"
        v-bind="field" />
</o-field>
</Field>

with version 0.7.0 the o-autocomplete was giving precedence to v-model in displaying the value inside the input that was basically a string.

Now with the 0.8 version, the v-model gets overwritten by the v-bind="field", that carries an object and then displays a [object object] string in the input. By removing the v-bind, everything works like before, however vee-validate stops working for that field (obviously!).

after some investigation I saw in the source code that the Autocomplete v-model definition adds with a helper a "passive" property set to true, and this boolean simply override the v-model by using the value coming from the watch function.

I'm not sure if this is the culprit of the problem, however I'd like to understand the logic of that passive or have some help to investigate better.

Thanks for your help!

[mlmoravek]

@Nemesis19 I'm not quite sure what your problem is. However, the useVModelBinding composable is an adaptation of the useVModel() composable from the vueuse library. Also in Vue 3.4 this may be replaced by Vue natives defineModel() composable.

By default, the props property is only bound as a computed get/set implementation. With the passive prop, a dedicated ref() variable is declared and the dataflow is implemented through watcher.

For the autocomplete component, the passive is used because I noticed some unexplained behaviour using only the computed property.

Does this help you to understand?

[Nemesis19]

considering the same veevalidate version ("vee-validate": "4.12.3"), I noticed that 0.7.0 and 0.8.2 differ into managing the v-biend=field that I add through veevalidate.

I believe that the passive mode, make the v-bind=field take precedence on v-model and make my input show a [object object] instead of the string that I pass to v-model.

I'd like to know the unexplained behaviour that made you add this passive mode, or at least please add a prop to let the user use it or not.

Forgot to mention. The error occur on load of the component, that means:

• I load the page
• I pass to component a v-model value
• I pass to component a v-bind=field from veevalidate
• the initial value inside the autocomplete's input is [object object]

after I search a new value, it works as expected, so I guess that passive is the problem.

[jtommy]

@mlmoravek comparing 0.7.x and 0.8.x the v-bind in the internal o-input has been moved after v-model, is there a reason?

https://github.com/oruga-ui/oruga/blob/bd96e19838fc43c9aa19fd8cba3fcf8daf13f243/packages/oruga-next/src/components/autocomplete/Autocomplete.vue#L4

https://github.com/oruga-ui/oruga/blob/86ad4e5dcfaee68958fc8039b48d13c9c2a30fbd/packages/oruga-next/src/components/autocomplete/Autocomplete.vue#L791

[mlmoravek]

@jtommy No, there's no real reason, maybe just the linter or personal preference. We can change it if necessary. Didn't expect this to be a problem.

[jtommy]

@mlmoravek please, restore it.

By the way I don't agree with @Nemesis19's code 😄

[mlmoravek]

@Nemesis19 @jtommy Does the PR #717 fix this problem?

[Nemesis19]

it probably solves, I'm not 100% sure, sorry