title: Vuejs Vuetify how to access properties of object in v-select
body: <p>My use case.</p>
  
  <ol>
  <li>I got an array of objects from a back-end api.</li>
  <li>I want to render those objects in a <code>v-select</code></li>
  </ol>
  
  <p>This is my code.</p>
  
  <pre><code>&lt;v-select
    :items="categories"
    name="category"
    label="Select a category"
    v-model="category"
    v-validate="'required'"&gt;
  &lt;/v-select&gt;
  </code></pre>
  
  <p>But it gives me the output.</p>
  
  <p><a href="https://i.stack.imgur.com/ehHCC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ehHCC.png" alt="enter image description here"></a></p>
  
  <p><strong>But I wants objects name property to be display in the</strong> <code>v-select</code></p>
  
  <p>We would do this in vanilla Vue.js</p>
  
  <pre><code>&lt;li v-for="cat in categories" :key="cat.name"&gt;{{cat.name}}&lt;/li&gt;
  </code></pre>
  
  <p>But here with vuetify we can't do this.</p>
  
  <pre><code>:items="categories.name"
  </code></pre>
  
  <p>Vuetify documentation</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>What they actually mean by <code>item-text</code> and <code>item-value</code>
  How do I achieve this using <code>item-text</code></p>