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

royallife 0
Viewed 27

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

enter image description here

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.

vuetify.js vue.js javascript
2 Answers

Based on the information provided, there doesn't appear to be anything wrong with what you have. However, if you're using v-autocomplete's slot for #item inside your v-autocomplete tab, then that could potentially be the source of the issue.

Having a block like this inside your v-autocomplete component would result in the issue you described:

<v-autocomplete ...>
  <template v-slot:item="data">
    {{ data }}
  </template>
</v-autocomplete>
Fluxriflex0
huan feng0
Related