Categories
Vue Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *