Group

Organizing menu items in groups

Examples

Basic usage

Setup group and items

Response data for grouped menu switch events

Event data logs

template

<SelectMenuBody>
  <SelectMenuHeader>Menu group</SelectMenuHeader>
  <SelectMenuGroup @change="handleGroupChange">
    <SelectMenuGroupItem
      name="group1"
      title="Group1"
    >
      <SelectMenuItem>group item 1-1</SelectMenuItem>
    </SelectMenuGroupItem>
    <SelectMenuGroupItem
      name="group2"
      title="Group2"
    >
      <SelectMenuItem>group item 2-1</SelectMenuItem>
      <SelectMenuItem>group item 2-2</SelectMenuItem>
    </SelectMenuGroupItem>
    <SelectMenuGroupItem
      name="group3"
      title="Group3"
    >
      <SelectMenuItem>group item 3-1</SelectMenuItem>
      <SelectMenuItem>group item 3-2</SelectMenuItem>
      <SelectMenuItem>group item 3-3</SelectMenuItem>
    </SelectMenuGroupItem>
  </SelectMenuGroup>
</SelectMenuBody>

ts

import {
  SelectMenuDropdown,
  SelectMenuTrigger,
  SelectMenuBody,
  SelectMenuHeader,
  SelectMenuGroup,
  SelectMenuGroupItem,
  SelectMenuItem
} from 'v-selectmenu'
import type { GroupItemData } from 'v-selectmenu'

function handleGroupChange(data: GroupItemData) {
  console.log(data)
}

Specifying a default group

Bind the group name through v-model to specify the default group

template

<SelectMenuGroup v-model="active">
  ...
</SelectMenuGroup>

ts

import { ref } from 'vue'

const active = ref('group2')

Props

Group props

SelectMenuGroup props

interface GroupProps {
  modelValue?: string
}

Item props

SelectMenuGroupItem props

interface GroupItemProps {
  name: string
  title: string
}

Events

update:modelValue

Responds to changes in the menu group value

`update:modelValue`: (value: string) => void

change

Responds to changes in the menu group data

change: (data: GroupItemData) => void

interface GroupItemData {
  name: string
  title: string
}
// import type from package
import type { GroupItemData } from 'v-selectmenu'

Slots

Group slots

SelectMenuGroup slots

• default default slot

Item slots

SelectMenuGroupItem slots

• default default slot