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

[tech-nova]

Here are 3 examples with multiple selection and complex object selection :

<template>
    <v-app>
      <v-container>
        <v-row>
          <v-col cols="12" md="6">
            <h1 class="text-h4 mb-4">Démonstration v-select avec optgroup</h1>
            
            <!-- Exemple 1: Sélection simple avec groupes -->
            <v-card class="mb-4">
              <v-card-title>Exemple 1: Sélection simple</v-card-title>
              <v-card-text>
                <v-select
                  v-model="singleSelection"
                  :items="mainItems"
                  item-title="label"
                  item-value="value"
                  label="Sélectionnez une option"
                  variant="outlined"
                  :menu-props="{ closeOnContentClick: false }"
                  :return-object="false"
                >
                  <!-- Template pour l'affichage de la sélection -->
                  <template v-slot:selection="{ item }">
                    <span>{{ getSelectionText(item.value) }}</span>
                  </template>
  
                  <!-- Template pour les items du menu -->
                  <template v-slot:item="{ props, item }">
                    <v-list-subheader 
                      v-if="item.raw.type === 'header'"
                      class="text-primary font-weight-bold"
                    >
                      {{ item.raw.label }}
                    </v-list-subheader>
                    
                    <v-list-item 
                      v-else-if="item.raw.type === 'item'"
                      v-bind="props"
                      :value="item.raw.value"
                      @click="handleItemClick(item.raw)"
                    >
                      <template v-slot:prepend>
                        <v-icon size="small">{{ item.raw.icon }}</v-icon>
                      </template>
                      <v-list-item-subtitle v-if="item.raw.description">
                        {{ item.raw.description }}
                      </v-list-item-subtitle>
                    </v-list-item>
                  </template>
                </v-select>
  
                <div v-if="singleSelection" class="mt-2">
                  <v-alert type="info" density="compact">
                    Sélection actuelle: {{ singleSelection }}
                  </v-alert>
                </div>
              </v-card-text>
            </v-card>
  
            <!-- Exemple 2: Sélection multiple avec groupes -->
            <v-card class="mb-4">
              <v-card-title>Exemple 2: Sélection multiple</v-card-title>
              <v-card-text>
                <v-select
                  v-model="multipleSelection"
                  :items="categorizedItems"
                  item-title="label"
                  item-value="value"
                  label="Sélectionnez plusieurs options"
                  variant="outlined"
                  multiple
                  chips
                  closable-chips
                  :menu-props="{ closeOnContentClick: false }"
                >
                  <!-- Template pour l'affichage des puces -->
                  <template v-slot:selection="{ item }">
                    <v-chip
                      v-for="selection in item"
                      :key="selection.value"
                      size="small"
                      closable
                      @click:close="removeFromMultipleSelection(selection.value)"
                    >
                      {{ selection.title }}
                    </v-chip>
                  </template>
                  
                  <template v-slot:item="{ props, item }">
                    <v-list-subheader 
                      v-if="item.raw.type === 'category'"
                      class="bg-grey-lighten-3"
                    >
                      <v-icon class="mr-2">{{ item.raw.icon }}</v-icon>
                      {{ item.raw.label }}
                    </v-list-subheader>
                    
                    <v-list-item 
                      v-else-if="item.raw.type === 'item'"
                      v-bind="props"
                      :value="item.raw.value"
                    >
                      <template v-slot:prepend>
                        <v-checkbox-btn
                          :model-value="item.raw.value ? multipleSelection.includes(item.raw.value) : false"
                          @update:model-value="item.raw.value ? toggleMultipleSelection(item.raw.value) : undefined"
                        />
                      </template>
                      
                    </v-list-item>
                  </template>
                </v-select>
  
                <div v-if="multipleSelection.length > 0" class="mt-2">
                  <v-alert type="success" density="compact">
                    {{ multipleSelection.length }} élément(s) sélectionné(s)
                  </v-alert>
                </div>
              </v-card-text>
            </v-card>
  
            <!-- Exemple 3: Structure complexe avec données dynamiques -->
            <v-card>
              <v-card-title>Exemple 3: Structure complexe</v-card-title>
              <v-card-text>
                <v-select
                  v-model="complexSelection"
                  :items="complexItems"
                  label="Sélection avec structure complexe"
                  variant="outlined"
                  :menu-props="{ closeOnContentClick: true }"
                >
                  <template v-slot:selection="{ item }">
                    <v-chip size="small" color="primary">
                      {{ getComplexSelectionText(item.value) }}
                    </v-chip>
                  </template>
  
                  <template v-slot:item="{ props, item }">
                    <div v-if="item.raw.isGroup" class="w-100">
                      <v-divider v-if="item.raw.groupId !== 'group1'" class="mt-2" />
                      <v-list-subheader class="text-uppercase font-weight-bold">
                        {{ item.raw.groupLabel }}
                      </v-list-subheader>
                      <v-list lines="two" density="compact">
                        <v-list-item
                          v-for="subItem in item.raw.subItems"
                          :key="subItem.id"
                          :value="`${item.raw.groupId}:${subItem.id}`"
                          @click="setComplexSelect(item.raw.groupId, subItem)"
                        >
                          <template v-slot:prepend>
                            <v-avatar size="32" :color="subItem.color">
                              <span class="text-white text-caption">{{ subItem.code }}</span>
                            </v-avatar>
                          </template>
                          <v-list-item-title>{{ subItem.name }}</v-list-item-title>
                          <v-list-item-subtitle>{{ subItem.description }}</v-list-item-subtitle>
                          <template v-slot:append>
                            <v-chip size="x-small" :color="subItem.status === 'active' ? 'success' : 'warning'">
                              {{ subItem.status }}
                            </v-chip>
                          </template>
                        </v-list-item>
                      </v-list>
                    </div>
                  </template>
                </v-select>
  
                <div v-if="selectedComplexItem" class="mt-4">
                  <v-card variant="tonal">
                    <v-card-text>
                      <div class="text-subtitle-2">Détails de la sélection:</div>
                      <div class="mt-2">
                        <strong>Groupe:</strong> {{ selectedComplexItem.groupId }}<br>
                        <strong>Item:</strong> {{ selectedComplexItem.item.name }}<br>
                        <strong>Description:</strong> {{ selectedComplexItem.item.description }}
                      </div>
                    </v-card-text>
                  </v-card>
                </div>
              </v-card-text>
            </v-card>
          </v-col>
  
          <!-- Colonne de droite avec informations -->
          <v-col cols="12" md="6">
            <v-card>
              <v-card-title>État des sélections</v-card-title>
              <v-card-text>
                <pre class="text-caption">{{ debugInfo }}</pre>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-app>
  </template>
  
  <script lang="ts" setup>
  import { computed, ref, type Ref } from 'vue'
  
  // Types
  interface SubItem {
    id: string
    name: string
    code: string
    description: string
    color: string
    status: 'active' | 'inactive'
  }
  
  interface ComplexGroup {
    isGroup: true
    groupId: string
    groupLabel: string
    subItems: SubItem[]
  }
  
  interface SelectItem {
    type: 'header' | 'item' | 'category'
    label: string
    value?: string
    icon?: string
    description?: string
    parentGroup?: string
  }
  
  // État réactif
  const singleSelection: Ref<string | null> = ref(null)
  const multipleSelection: Ref<string[]> = ref([])
  const complexSelection: Ref<string | null> = ref(null)
  const selectedComplexItem: Ref<{ groupId: string; item: SubItem } | null> = ref(null)
  
  // Données pour l'exemple 1
  const mainItems: Ref<SelectItem[]> = ref([
    { type: 'header', label: '🍎 Fruits' },
    { 
      type: 'item', 
      label: 'Pomme', 
      value: 'apple',
      icon: 'mdi-apple',
      description: 'Rouge et croquante',
      parentGroup: 'fruits'
    },
    { 
      type: 'item', 
      label: 'Banane', 
      value: 'banana',
      icon: 'mdi-fruit-banana',
      description: 'Jaune et sucrée',
      parentGroup: 'fruits'
    },
    { 
      type: 'item', 
      label: 'Orange', 
      value: 'orange',
      icon: 'mdi-fruit-citrus',
      description: 'Pleine de vitamine C',
      parentGroup: 'fruits'
    },
    
    { type: 'header', label: '🥕 Légumes' },
    { 
      type: 'item', 
      label: 'Carotte', 
      value: 'carrot',
      icon: 'mdi-carrot',
      parentGroup: 'vegetables'
    },
    { 
      type: 'item', 
      label: 'Brocoli', 
      value: 'broccoli',
      icon: 'mdi-flower',
      parentGroup: 'vegetables'
    },
    { 
      type: 'item', 
      label: 'Tomate', 
      value: 'tomato',
      icon: 'mdi-fruit-tomato',
      parentGroup: 'vegetables'
    },
    
    { type: 'header', label: '🥛 Produits laitiers' },
    { 
      type: 'item', 
      label: 'Lait', 
      value: 'milk',
      icon: 'mdi-cup',
      parentGroup: 'dairy'
    },
    { 
      type: 'item', 
      label: 'Fromage', 
      value: 'cheese',
      icon: 'mdi-cheese',
      parentGroup: 'dairy'
    },
    { 
      type: 'item', 
      label: 'Yaourt', 
      value: 'yogurt',
      icon: 'mdi-cup-outline',
      parentGroup: 'dairy'
    }
  ])
  
  // Données pour l'exemple 2
  const categorizedItems: Ref<SelectItem[]> = ref([
    { type: 'category', label: 'Technologies Frontend', icon: 'mdi-web' },
    { type: 'item', label: 'Vue.js', value: 'vue' },
    { type: 'item', label: 'React', value: 'react' },
    { type: 'item', label: 'Angular', value: 'angular' },
    { type: 'item', label: 'Svelte', value: 'svelte' },
    
    { type: 'category', label: 'Technologies Backend', icon: 'mdi-server' },
    { type: 'item', label: 'Node.js', value: 'node' },
    { type: 'item', label: 'Python', value: 'python' },
    { type: 'item', label: 'Java', value: 'java' },
    { type: 'item', label: 'PHP', value: 'php' },
    
    { type: 'category', label: 'Bases de données', icon: 'mdi-database' },
    { type: 'item', label: 'PostgreSQL', value: 'postgres' },
    { type: 'item', label: 'MongoDB', value: 'mongodb' },
    { type: 'item', label: 'Redis', value: 'redis' },
    { type: 'item', label: 'MySQL', value: 'mysql' }
  ])
  
  // Données pour l'exemple 3
  const complexItems: Ref<ComplexGroup[]> = ref([
    {
      isGroup: true,
      groupId: 'group1',
      groupLabel: 'Département IT',
      subItems: [
        {
          id: 'dev1',
          name: 'Alice Martin',
          code: 'AM',
          description: 'Développeuse Senior Frontend',
          color: 'blue',
          status: 'active'
        },
        {
          id: 'dev2',
          name: 'Bob Dupont',
          code: 'BD',
          description: 'Architecte Solutions',
          color: 'purple',
          status: 'active'
        },
        {
          id: 'dev3',
          name: 'Charlie Wilson',
          code: 'CW',
          description: 'DevOps Engineer',
          color: 'orange',
          status: 'inactive'
        }
      ]
    },
    {
      isGroup: true,
      groupId: 'group2',
      groupLabel: 'Département Marketing',
      subItems: [
        {
          id: 'mkt1',
          name: 'Diana Prince',
          code: 'DP',
          description: 'Responsable Marketing Digital',
          color: 'pink',
          status: 'active'
        },
        {
          id: 'mkt2',
          name: 'Eva Green',
          code: 'EG',
          description: 'Content Manager',
          color: 'green',
          status: 'active'
        }
      ]
    },
    {
      isGroup: true,
      groupId: 'group3',
      groupLabel: 'Département RH',
      subItems: [
        {
          id: 'hr1',
          name: 'Frank Castle',
          code: 'FC',
          description: 'Directeur RH',
          color: 'red',
          status: 'active'
        },
        {
          id: 'hr2',
          name: 'Grace Kelly',
          code: 'GK',
          description: 'Chargée de recrutement',
          color: 'teal',
          status: 'active'
        }
      ]
    }
  ])
  
  // Fonctions
  const handleItemClick = (item: SelectItem) => {
    if (item.value) {
      console.log('Item cliqué:', item)
      console.log('Groupe parent:', item.parentGroup)
    }
  }
  
  const toggleMultipleSelection = (value: string) => {
    const index = multipleSelection.value.indexOf(value)
    if (index > -1) {
      multipleSelection.value.splice(index, 1)
    } else {
      multipleSelection.value.push(value)
    }
  }
  
  const removeFromMultipleSelection = (value: string) => {
    const index = multipleSelection.value.indexOf(value)
    if (index > -1) {
      multipleSelection.value.splice(index, 1)
    }
  }
  
  const setComplexSelect = (groupId: string, subItem: SubItem) => {
    complexSelection.value = `${groupId}:${subItem.id}`
    selectedComplexItem.value = { groupId, item: subItem }
    console.log('Sélection complexe:', { groupId, subItem })
  }
  
  const getSelectionText = (value: string | null): string => {
    if (!value) return ''
    const item = mainItems.value.find(i => i.value === value)
    return item?.label || value
  }
  
  const getComplexSelectionText = (value: string | null): string => {
    if (!value) return ''
    if (selectedComplexItem.value) {
      return selectedComplexItem.value.item.name
    }
    return value
  }
  
  // Computed pour debug
  const debugInfo = computed(() => {
    return JSON.stringify({
      singleSelection: singleSelection.value,
      multipleSelection: multipleSelection.value,
      complexSelection: complexSelection.value,
      selectedComplexItem: selectedComplexItem.value
    }, null, 2)
  })
  </script>
  
  <style scoped>
  .v-list-subheader {
    font-size: 0.875rem;
    letter-spacing: 0.05em;
  }
  
  .w-100 {
    width: 100%;
  }
  
  pre {
    background-color: #f5f5f5;
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
  }
  </style>