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"
  name="category"
  label="Select a category"
  v-model="category"
  v-validate="'required'"
  item-text="name"
  ></v-select>