Is there option group on Vuetify?
Seems that vuetify now offers this functionality itself. See the example model of the vuetify doku:
So you have to give the array ’items' only an object at the desired position.
Example {'header': 'Mitarbeiter'}
OUTDATED : See @DevNik answer below for proper implementation
You can do this adding divider
in your select's data and using template
to have a better control over how your select is displaying data.
Like this :
HTML
<v-select
v-model="peopleSelected"
:items="people"
box
chips
color="blue-grey lighten-2"
label="Select"
item-text="name"
item-value="name"
multiple
>
<!-- Template for render selected data -->
<template
slot="selection"
slot-scope="data"
>
<v-chip
:selected="data.selected"
close
class="chip--select-multi"
@input="remove(data.item)"
>
{{ data.item.name }}
</v-chip>
</template>
<!-- Template for render data when the select is expanded -->
<template
slot="item"
slot-scope="data"
>
<!-- Divider and Header-->
<template v-if="typeof data.item !== 'object'">
<v-list-tile-content v-text="data.item"/>
</template>
<!-- Normal item -->
<template v-else>
<v-list-tile-content>
<v-list-tile-title v-html="data.item.name"/>
<v-list-tile-sub-title v-html="data.item.group"/>
</v-list-tile-content>
</template>
</template>
</v-select>
Data
data: () => ({
peopleSelected:[],
people: [
{ header: 'Group 1' },
{ name: 'Sandra Adams', group: 'Group 1' },
{ name: 'Ali Connors', group: 'Group 1' },
{ name: 'Trevor Hansen', group: 'Group 1' },
{ name: 'Tucker Smith', group: 'Group 1'},
{ divider: true },
{ header: 'Group 2' },
{ name: 'Britta Holt', group: 'Group 2'},
{ name: 'Jane Smith ', group: 'Group 2'},
{ name: 'John Smith', group: 'Group 2' },
{ name: 'Sandra Williams', group: 'Group 2' }
]
})
CodePen