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"
      />

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 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>