Vuetify - item-text item-value doesn't work at all

Question

I'm trying to make use of return-object directive.

I have a list of objects:

[{"id":1,"profile_name":"Shoes store","quantity":55,"price_multiplier":0.5,"header":"This is a header","location":"New York","shipping_charge":5},{"id":2,"profile_name":"TV Store","quantity":8,"price_multiplier":1,"header":"This is a header. A little bit longer header than the header before so I can see how it behaves...","location":null,"shipping_charge":9}]

Both have id and profile_name.

I want to create a v-select that returns the selected object.

   <v-select v-model="template" :items="$store.state.listingTemplates"
                        :error-messages="formErrors.sku"
                        label="Template" outlined
                        hide-details
                        item-text="profile_name"
                        item-value="id"
                        return-object
        ></v-select>

It doesn't work - it uses header attribute as a text and I can't click/choose any of them.

Do you know where is the problem?

Which version of vuetify are you using? Is this the complete code? Because there is no reason for vuetify to use the header field as text by default. Usually if nothing is provided it should show just "Object object". — Marco
Just checked some versions of vuetify. Older versions don't have the item-text item-value props, so make sure you are using the current version of vuetify. (can confirm this "issue" in 0.14), but newer versions such as 2.* are working as expected. — Marco
Yes, this is the complete code. I even checked the store if it's in proper format. It is. I use theme and in package.json there is "vuetify": "^2.4.3", — Milano
And which version is installed (package lock/yarn lock)? Is there also 2.*? — Marco

tony19 tony19 · Accepted Answer · 2021-04-03T23:12:44

The docs for v-select.items indicate that header is a special key that renders a non-selectable item:

Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.

As a workaround, you could use a computed prop that extracts only the needed fields from $store.state.listingTemplates (i.e., profile_name and id):

export default {
  computed: {
    computedListingTemplates() {
      return this.$store.state.listingTemplates.map(t => ({
        text: t.profile_name,
        value: t.id,
        item: t, // also return original object
      }))
    }
  }
}

Then use that computed prop with v-select, while removing the item-text and item-value props:

<v-select :items="computedListingTemplates">

Note the computed prop mapping also returns the original object in an item property, and with <v-select return-object>, the v-model will include the original object.

Example value of the v-model variable:

{
  "text": "TV Store",
  "value": 2,
  "item": {
    "id": 2,
    "profile_name": "TV Store",
    "quantity": 8,
    "price_multiplier": 1,
    "header": "This is a header. A little bit longer header than the header before so I can see how it behaves...",
    "location": null,
    "shipping_charge": 9
  }
}

demo

Vuetify - item-text item-value doesn't work at all

1 Answers