Vue3中Vuetify Autocomplete显示[object Object]，如何显示州名？

你的问题出在Autocomplete组件未正确解析要显示的文本字段，导致直接渲染了对象本身。可以通过以下方式修复：

方案一：使用自定义插槽指定显示内容 #

在Autocomplete组件中添加item和chip插槽，强制指定显示的文本内容：

<template>
  <v-row>
    <v-autocomplete
      v-model="add.id"
      :items="states"
      item-text="name"
      item-value="id"
      chips
      deletable-chips
      filled
    >
      <!-- 下拉选项的显示模板 -->
      <template v-slot:item="{ item }">
        {{ item.name }}
      </template>
      <!-- 选中后Chip的显示模板 -->
      <template v-slot:chip="{ item }">
        {{ item.name }}
      </template>
    </v-autocomplete>
  </v-row>
</template>

<script>
import { Form, Field } from 'vee-validate';

export default {
  components: {
    Form, Field,
  },
  setup(props) {},
  data() {
    return {
      add: {
        id: 1,
      },
      states: [
        { name: 'Florida', id: 1 },
        { name: 'Georgia', id: 2 },
        { name: 'Nebraska', id: 3 },
        { name: 'California', id: 4 },
        { name: 'New York', id: 5 },
      ],
    };
  },
  methods: {},
};
</script>

方案二：检查基础配置与兼容性 #

• 确保v-model绑定的add.id类型和item-value指定的id字段类型一致（你的代码中都是数字，这部分没问题）；
• 确认使用的Vuetify版本与Vue3兼容，避免版本差异导致item-text/item-value属性失效。

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