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>