如何绑定vee-validate字段到Vuetify的v-autocomplete，避免显示[object Object]

当使用vee-validate的Field组件绑定开启return-object属性的v-autocomplete时，选中选项后输入框在聚焦状态下会显示[object Object]，失焦后才会正常显示选项标题。由于业务需要保留return-object（用于关联重复标题对应的不同ID），可以通过以下方式修复：

核心原因 #

v-autocomplete开启return-object后会返回完整的选项对象，但直接v-bind="field"会让vee-validate的字段处理逻辑覆盖组件的内部显示规则，聚焦时组件无法正确识别对象中的显示字段，导致对象被转为字符串显示。

修复方案 #

明确指定v-autocomplete的显示字段，并拆分field的绑定逻辑，避免干扰组件内部处理：

修改后的模板代码：

<template>
  <Form :validation-schema="schema">
    <Field v-model="tag" name="tags" v-slot="{ field, errors }">
      <v-autocomplete
        id="tags"
        :items="tags"
        :model-value="field.value"
        @input="field.onInput"
        item-text="title"
        item-value="value"
        clearable
        return-object
        :error-messages="errors"
        placeholder="Select a tag"
      ></v-autocomplete>
    </Field>
  </Form>
</template>

关键修改点 #

1. item-text="title"：强制v-autocomplete始终使用选项的title字段作为显示文本，无论输入框是否聚焦，都能正确渲染标题。
2. 拆分field绑定：用:model-value="field.value"绑定值，@input="field.onInput"触发字段更新，替代直接v-bind="field"，避免覆盖组件的内部状态处理逻辑。
3. item-value="value"：指定选项的唯一标识字段，配合return-object确保选中时返回完整的选项对象，同时保持ID与标题的关联。

这样修改后，输入框在聚焦和失焦状态下都会正确显示选中选项的标题，同时保留return-object的功能，满足业务需求。

内容的提问来源于stack exchange，提问作者Jake Wickstrom