@nextcloud/vueNcSelectTags
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| getOptionLabel | Callback to generate the label text<br/>@see https://vue-select.org/api/props.html#getoptionlabel | func | - | (option) => { const { displayName, userVisible, userAssignable } = option if (userVisible === false) { return t('{tag} (invisible)', { tag: displayName }) } if (userAssignable === false) { return t('{tag} (restricted)', { tag: displayName }) } return displayName } |
| multiple | Allow selection of multiple options This prop automatically sets the internal closeOnSelect prop toits boolean opposite<br/> @see https://vue-select.org/api/props.html#multiple | boolean | - | true |
| optionsFilter | Callback to filter available options | func | - | (_element, index) => index < 5 |
| placeholder | Placeholder text<br/>@see https://vue-select.org/api/props.html#placeholder | string | - | t('Select a tag') |
| value | Currently selected value | number|array | - | null |
Any available prop<br/>@see https://vue-select.org/api/props.html | - |
Events
| Event name | Properties | Description |
|---|---|---|
| input | Emitted on input events of the multiselect field | |
| All events from https://vue-select.org/api/events.html |
Slots
| Name | Description | Bindings |
|---|---|---|
| name | Any combination of slots from https://vue-select.org/api/slots.html |
Single tag selector
loading...
Multiple tag selector
loading...
Custom filter
Because of compatibility reasons only 5 tag entries are shown by default. If you want to show all available tags set the optionsFilter function-prop to null:
loading...
It's also possible to apply any custom filter logic by setting the optionsFilter function-prop to any custom function receiving the tag element and the index:
loading...