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

Question

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

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

Answer 1

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