如何将 vee-validate 字段绑定到 Vuetify 的 v-autocomplete 而不显示 [object Object]？

Question

将 vee-validate 字段绑定到 v-autocomplete 组件时，每当选择选项时，输入都会显示 [object Object]。在模糊输入时，会显示正确的值，仅当焦点位于输入字段时才会出现此问题。

v-autocomplete 组件配置有

return-object

，这在此特定用例中是必要的，因为可能存在具有不同 ID 的重复标题，因此 ID 需要始终与标题保持关联。

是否可以在此处进行修改，以便在输入焦点时正确呈现项目的标题？

<script setup>
import { ref } from 'vue';
import { useForm, Form, Field } from 'vee-validate';
import * as yup from 'yup';

const schema = yup.object({
  tags: yup
    .object()
    .shape({
      // make C invalid to demo that validation works as expected
      title: yup.string().oneOf(['A', 'B']),
      value: yup.string().oneOf(['id-a', 'id-b']),
    })
    .required()
    .label('Tag'),
});

const tags = [
  { title: 'A', value: 'id-a' },
  { title: 'B', value: 'id-b' },
  { title: 'C', value: 'id-c' },
];
const tag = ref('');
</script>

<template>
  <Form :validation-schema="schema">
    <Field v-model="tag" name="tags" v-slot="{ field, errors, value }">
      <v-autocomplete
        id="tags"
        :items="tags"
        v-bind="field"
        clearable
        return-object
        :errorMessages="errors"
        placeholder="Select a tag"
      ></v-autocomplete>
    </Field>
  </Form>
</template>

在这里简单复制：https://stackblitz.com/edit/vee-validate-v4-vuetify-5o9oev?file=src%2FApp.vue

我希望当从下拉列表中选择一个值时，该值的标题显示在输入框中。然而，这仅在模糊输入后才成立，当它聚焦时，它会显示

[object Object]

而不是

Answer 1

field

插槽属性包含一个

value

属性，该属性最终出现在输入上。将其从插槽道具中取出即可解决问题：

<Field v-slot="{field: {value, ...fieldWithoutValue}, errors}" ...>
  <v-autocomplete
    v-bind="fieldWithoutValue"
    ...

表达式

{field: {value, ...fieldWithoutValue}

将

value

解构为自己的变量，并将所有其他属性放入一个新对象中，可通过新变量

fieldWithoutValue

访问（您也可以再次调用它

field

）。

这是更新后的stackblitz