Vuejs Vuetify how to access properties of object in v-select - vue.js

Question

My use case.
I got an array of objects from a back-end api.
I want to render those objects in a v-select
This is my code.
<v-select
:items="categories"
name="category"
label="Select a category"
v-model="category"
v-validate="'required'"
>
</v-select>
But it gives me the output.
But I wants objects name property to be display in the v-select
We would do this in vanilla Vue.js
<li v-for="cat in categories" :key="cat.name">{{cat.name}}</li>
But here with vuetify we can't do this.
:items="categories.name"
Vuetify documentation
Can be an array of objects or array of strings. When using objects,
will look for a text and value field. This can be changed using the
item-text and item-value props.
What they actually mean by item-text and item-value
How do I achieve this using item-text

Answer 1

Your category has name attribute, you can pass to item-text:
<v-select
:items="categories"
v-model="category"
name="category"
v-validate="'required'"
item-text="name"
label="Select a category"
/>

Answer 2

I'd seen a similar solution on an example on codepen, but for some reason it did not work to merely assign the "name" to my item-text. Adding single quotes around the name attribute, thus making it a string, is what worked for me (but I don't know why that is):
<v-select v-if="categories"
:items="categories"
:item-text="'name'"
:item-value="'name'"
v-model="selectedCategory"
name="selectedCategory"
label="Select categories"
solo
dark
>
</v-select>
<script> ...
categories: [
{ name: "test", path: "test" },
{ name: "test1", path: "test1" }
],
</script>

Answer 3

For those still looking, the item-name and item-value props are used to specify what value to return for the name and value from the item. If you want to display only the name, but keep the entire object as the value, the return-object prop will return the entire object in the v-model.
Check out the documentation at: https://vuetifyjs.com/en/components/selects/#custom-text-and-value
<v-select :items="categories" v-model="category" name="category"
v-validate="'required'" item-text="name" return-object label="Select a category"
/>

Answer 4

For Vuetify 2.x use <v-slot:item> slot to customize the list and <v-slot:selection> to customize the selection. check v-select slot list in the docs
<v-select
:items="categories"
name="category"
label="Select a category"
v-model="category"
v-validate="'required'"
>
<template v-slot:item="{item}">
{{item.name}}
</template>
<template v-slot:selection="{item}">
{{item.name}}
</template>
</v-select>

Answer 5

To be clear here's with script
<template>
<v-select
outlined
:items="areas"
v-model="area"
name="area"
item-text="text"
label="Area"
return-object
></v-select>
</template>
<script>
export default {
data: () => ({
area: { text: 'area', disabled: false, status: false },
areas: [
{ text: 'Pre-op', disabled: false },
{ text: 'Operational', disabled: false },
{ text: 'USDA', disabled: false },
],
}),
}
</script>