Vuetify 3 v-select类型校验失败求助：选中项存对象报错

问题原因 #

你遇到的警告是因为Vuetify 3的v-select组件默认会为每个下拉选项设置原生title属性（鼠标悬停时的提示文本），当你使用对象数组作为选项且未显式指定item-title时，组件错误地将整个对象传递给了title prop，而title要求的类型是字符串、数字或布尔值，因此触发类型校验失败。

解决方案 #

在v-select组件上添加item-title属性，指定与item-text相同的字段（即username），确保title属性获取到的是字符串类型的值。

修改后的组件代码 #

<v-select
  v-model="selectedItem"
  :items="items"
  name="username"
  item-text="username"
  item-title="username" <!-- 新增该行，指定title使用的字段 -->
  label="Select Item"
  return-object
></v-select>

完整脚本代码（补充缺失部分） #

<script>
import axios from "axios";

// 需确保config已正确配置（比如请求头），示例配置如下
const config = {
  headers: {
    'Content-Type': 'application/json'
  }
};

export default {
  name: "Testing123",
  data() {
    return {
      items: [],
      selectedItem: null,
    };
  },
  created() {
    this.fetchItems();
  },
  methods: {
    fetchItems() {
      axios
        .get("http://localhost:5000/items", config)
        .then((response) => {
          this.items = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

修改后，v-select会将每个选项的username字段同时作为显示文本（item-text）和原生title属性的值，既满足选中时返回完整对象的需求，又解决了类型校验的警告问题。

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