Vuetify - Get object's single property on v-select

Question

I am creating a form with Vuetify, which has initial values on some inputs and these values come from objects. Basically, the objects have two important properties: the name and the id. Folllowing the Vuetify docs, i'm using item-text prop to display the object's name on the v-select and item-value to return the object's id when the option is selected. When another option is selected, it returns the id as expected. However, if the initial option is not changed, the returned value is the whole object, instead of just the id.

The context is this:

       <v-select
          label="Select an specialty..."
          v-model="entry.specialty"
          :items="specialties"
          :item-text="item=>item.name"
          :item-value="item=>item.id"
        ></v-select>

The entry object has the specialty property and the initial specialty's name is displayed on the select. I think the problem is the v-model, which has the whole specialty object. I tried to set the v-model as entry.specialty.id, but it did not work as expected.

Let me know if there's more information i can give.

Gabriel Willemann Gabriel Willemann · Accepted Answer · 2020-02-17T14:44:37

Try to set the property return-object:

<v-select
  label="Select an specialty..."
  v-model="entry.specialty"
  :items="specialties"
  :item-text="item=>item.name"
  :item-value="item=>item.id"
  :return-object="false"
/>

The return-obejct can be: true or false

If this don't work, please post whole component code.

Vuetify - Get object's single property on v-select

1 Answers