Search code examples
vue.jsmaterial-designvuetify.js

How can I customize the value of a vuetify's v-select statement?

I am trying to pass an array of objects to a v-select :items. I would like to display the object name for every option. I have roles formated like so [{ id: '1', name: 'admin' }, { id: '2', name: 'guest' } ]

Here is my vuetify code 

<v-select
    :items="roles"
    v-model="value"
    label="Select Role"
 ></v-select>

The above code returns this view

enter image description here

How can I display the role name instead of [object object]

Solution

  • Vuetify 2 (OG question): Use the item-name and item-value props

    <v-select
    :items="roles"
    item-text="name"
    item-value="id"
    v-model="value"
    label="Select Role"
 ></v-select>

    For Vuetify 3, the item-name prop has changed to item-title