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

Answer 1

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 2

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