Vuetify v-select attribute type check fails

Question

When I use v-select in Vuetify 3, I often encounter the following error:

[Vue warning]: Invalid prop: Type check failed for prop 'title'. Expected String | Number | Boolean but got Object

In

I'm not sure what the problem is. I'm getting an array of objects from a backend API as my JSON response. My goal is to display all the usernames in the dropdown, but when I select an item in the dropdown, I want to store the entire object in a variable. For example, if I select the "Desmond" username in the dropdown menu, I want the objects related to Desmond to be stored, i.e. {"username": "Desmond","email": " desmond@test.com"}

<code><v-select
  v-model="selectedItem"
  :items="items"
  name="username"
  item-text="username"
  label="Select Item"
  return-object
></v-select>
</code>

<script>
import axios from "axios";

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);
        });
    },

This is myresponse.data

[
    {
        "username": "Eric",
        "email": "eric@test.com",
    },
    {
        "username": "Desmond",
        "email": "desmond@test.com",
    },
]

Answer 1

You are using :item-text, which is the property name in Vuetify v2, see here for details.

In v3, this property has been renamed to :item-title.

Change the name and it will work:

<v-select
  item-title="username" 
  ...
></v-select>

Examples can be seen in playground.