Sometimes, we want to access properties of an object in a Vuetify v-select with Vue.js.

In this article, we’ll look at how to access properties of an object in a Vuetify v-select with Vue.js.

How to access properties of an object in a Vuetify v-select with Vue.js?

To access properties of an object in a Vuetify v-select with Vue.js, we can set the item-text prop to the property that we want to render as the drop down options’ text.

For instance, we write

<template>
  <div>
    <v-select
      :items="categories"
      v-model="category"
      name="category"
      item-text="name"
      label="Select a category"
    />
  </div>
</template>

to set the item-text prop to 'name' so that the value of the name property of each item in categories would be rendered as the text for each option.

Conclusion

To access properties of an object in a Vuetify v-select with Vue.js, we can set the item-text prop to the property that we want to render as the drop down options’ text.