how to group items in v-select Vuetify 3

[arcp10]

Can someone please help me with some information on how to group items in v-select/v-autocomplete using item-children and item-props in Vuetify 3?

[qiuzman]

Is it different from Vuetify 2?

[tkakar]

@arcp10 @qiuzman have you found any solution to this. I'm also looking for solutions to accomplish this. For Vuetify 2 we had to include a {header: 'xyz'} object in the items array before adding items related to that group. That does not work on Vuetify3. On v-select's documentation they mention adding a header property to the item-objects. I tried using that property with the item-disabled prop, but did not work. Any thoughts on what exactly this description mean?

[tkakar]

Anyone having similar issue, I came across this solution on discord and it works. Open to any suggestions that use header directly instead of disabling the object.

[tmichalski]

I'm experiencing the same issue. Following the Vuetify 2 examples does not seem to work for Vuetify 3.

[affinage-digital]

looks like PR waiting for review #15728

[affinage-digital]

Temporary solution

<template>
    <div>
        <v-select :items="items" :menu="true">
            <template #item="data">
                <v-list-subheader v-if="data.props.header">
                    {{ data.props.header }}
                </v-list-subheader>
                <v-divider v-else-if="data.props.divider" />
                <v-list-item v-else v-bind="data.props">
                    <v-list-item-subtitle>
                        {{ data.item.value }}
                    </v-list-item-subtitle>
                </v-list-item>
            </template>
        </v-select>
    </div>
</template>

<script setup lang="ts">
const items = ref([
    { props: { header: 'Group #1' } },
    {
        title: 'Item #1',
        value: 1,
    },
    {
        title: 'Item #2',
        value: 2,
    },
    {
        title: 'Item #3',
        value: 3,
    },
    { props: { divider: true } },
    { props: { header: 'Group #2' } },
    {
        title: 'Item #4',
        value: 4,
    },
    {
        title: 'Item #5',
        value: 5,
    },
    {
        title: 'Item #6',
        value: 6,
    },
]);
</script>

[jaireina]

Thanks, this worked!

[JessYan0913]

I saw that the official document has given the item-children attribute, but it still doesn't take effect

[JessYan0913]

<template>
  <v-select
    v-model="favorites"
    :items="states"
    label="Select"
    multiple
    hint="Pick your favorite states"
    item-text="name"
    item-value="id"
    item-children="items"
    persistent-hint
  ></v-select>
</template>

<script>
  export default {
    data() {
      return {
        favorites: [],
        states: [
          {
            id: 1,
            name: 'Group A',
            items: [
              { id: 1, name: 'Item A1' },
              { id: 2, name: 'Item A2' },
              { id: 3, name: 'Item A3' },
            ],
          },
          {
            id: 2,
            name: 'Group B',
            items: [
              { id: 4, name: 'Item B1' },
              { id: 5, name: 'Item B2' },
              { id: 6, name: 'Item B3' },
            ],
          },
        ],
      }
    },
  }
</script>

[MrWasimAbbasi]

this issue is still not resolved, very disappointing.

[UglyHobbitFeet]

FWIW I did the following workaround to select from a nested list. Hopefully it will help somebody

           <v-select :items="mainItems" v-model="singleSelection" :menu-props="{ closeOnContentClick: true }>
              <template v-slot:item="{ props, item }">
                <v-list lines="one" select-strategy="classic">
                  <v-list-subheader>{{ item.raw.mainItemLabel }}</v-list-subheader>
                  <v-list-item :value="`nestedList${index}`"  v-for="(subItem, index) in item.raw.subItems" :key="index">
                    <v-list-item-title @click="()=> setSelect(item.raw.mainItemId, subItem.name)">{{subItem.name}}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </template>
            </v-select>

<script lang="ts" setup>
           const singleSelection: Ref<string | null> = ref(null);
           const mainItems: Ref<SomeCustomObject[]> = ref([{
               mainItemId: 'someId',
               mainItemLabel: 'foo',
               subItems: [{
                 name: 'bar'
               }, {
                 name: 'baz'
               }]
           }]);

           function setSelect(mainId: string, subItemName: string): void {
              // Force the select box to display the selected item
              singleSelection.value = subItemName;

              // Do whatever custom things you need to with the values
              console.log(mainId, subItemName);
           }
</script>

[MrWasimAbbasi]

thanks @UglyHobbitFeet , It's a better

[hdev1]

This is still an issue for Vuetify 3.7.3. Why has this not been implemented natively??