I have a field in a form which uses a v-autocomplete component to select a value. I am using this specific component because I want to display names to a user, but then return an accompanying id value to interact with an API.
When selecting a new value, the input box displays [object Object]. When the input is blurred, the input box then goes to displaying the correct value.
All other behaviors work as expected. The input to the component is validated, and the bound v-model updates as expected. The only issue here is that the v-bind of field causes the unblurred input to display [object Object]
Note:
I am following the example for input from the documentation which reads as follows:
<!-- DONT: ⛔️ v-model on input tag -->
<Field type="text" name="name" v-slot="{ field }">
<!-- Conflict between v-model and `v-bind=field` -->
<input v-bind="field" v-model="name">
</Field>
<!-- DO: ✅ v-model on field tag -->
<Field v-model="name" type="text" name="name" v-slot="{ field }">
<input v-bind="field">
</Field>
jv3ga
commented
4 days ago
What happened?
I have a field in a form which uses a v-autocomplete component to select a value. I am using this specific component because I want to display names to a user, but then return an accompanying
idvalue to interact with an API.When selecting a new value, the input box displays
[object Object]. When the input is blurred, the input box then goes to displaying the correct value.All other behaviors work as expected. The input to the component is validated, and the bound v-model updates as expected. The only issue here is that the v-bind of field causes the unblurred input to display [object Object]
Note: I am following the example for
inputfrom the documentation which reads as follows:Reproduction steps
No response
Version
Vue.js 3.x and vee-validate 4.x
What browsers are you seeing the problem on?
Relevant log output
No response
Demo link
https://stackblitz.com/edit/vee-validate-v4-vuetify-5o9oev?file=src%2FApp.vue
Code of Conduct