Vuejs Vuetify how to access properties of object in v-select Vuejs Vuetify how to access properties of object in v-select vue.js vue.js

Vuejs Vuetify how to access properties of object in v-select


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


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>


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>