import SelectButton from 'primevue/selectbutton';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/selectbutton/selectbutton.min.js"></script>
SelectButton requires a value to bind and a collection of arbitrary objects along with the optionLabel property to specify the label property of the option.
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
export default {
data() {
return {
selectedCity: null,
cities: [
{name: 'London', code: 'LND'},
{name: 'Paris', code: 'PRS'},
{name: 'Rome', code: 'RM'}
]
}
}
}
SelectButton allows selecting only one item by default and setting multiple option enables choosing more than one item. In multiple case, model property should be an array.
<SelectButton v-model="selectedCity" :options="cities" optionLabel="brand" :multiple="true" />
Label of an option is used as the display text of an item by default, for custom content support define an option template that gets the option instance as a parameter.
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
<template #option="slotProps">
<div class="car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<div>{{slotProps.option.brand}}</div>
</div>
</template>
</SelectButton>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | any | null | Value of the component. |
| options | array | null | An array of selectitems to display as the available options. |
| optionLabel | string | function | null | Property name or getter function to use as the label of an option. |
| optionValue | string | function | null | Property name or getter function to use as the value of an option, defaults to the option itself when not defined. |
| optionDisabled | string | function | null | Property name or getter function to use as the disabled flag of an option, defaults to false when not defined. |
| multiple | boolean | false | When specified, allows selecting multiple values. |
| disabled | boolean | false | When present, it specifies that the element should be disabled. |
| dataKey | string | null | A property to uniquely identify an option. |
| ariaLabelledBy | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
| Name | Parameters | Description |
|---|---|---|
| change | event.originalEvent: browser event event.value: Single value or an array of values that are selected. |
Callback to invoke on value change. |
| focus | event: Browser event | Callback to invoke on focus. |
| blur | event: Browser event | Callback to invoke on blur. |
| Name | Parameters |
|---|---|
| option | option: Option instance index: Index of the option |
None.