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

Question

My use case.

1. I got an array of objects from a back-end api.
2. 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"       />