Vuejs Vuetify how to access properties of object in v-select
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"
/>
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>
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>
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"
/>