Vuetify v-autocomplete v-text showing the full object instead of text only

Question

Vuetify v-autocomplete v-text showing the full object instead of text only.

here is the code.

  data() {
    return {
      people: [
        { name: "test1", value: 1 },
        { name: "test2", value: 2 },
      ]
    };
  },

component

 <v-autocomplete
   v-model="friends"
   :disabled="isUpdating"
   :items="people"
   item-text="name"
   item-value="id"
   @change="changed"
   filled
   chips
   color="blue-grey lighten-2"
   label="Participants"
   multiple
>

Any help? thanks in advance.

Answer 1

Your code could work well, please double check with the demo:

https://codesandbox.io/s/vuetify-example-sandbox-forked-9ys2tw?file=/src/components/TestComponent.vue

you can also try another option like:

vuetify 2:

change item-text to:

:item-text="item => item.name"

vuetify 3:

change item-text to:

:item-title="item => item.name"