@nextcloud/vueNcMultiselectTags
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| label | string | - | t('Select a tag') | |
| value | number|array | - | ||
| disabled | boolean | - | false | |
| multiple | boolean | - | true | |
| filter | func | - | (_element, index) => index < 5 |
Events
| Event name | Properties | Description |
|---|---|---|
| input | Emitted on input events of the multiselect field |
NcMultiselectTags
Use NcSelectTags instead
Single tag selector
vue
<template>
<div class="wrapper">
<NcMultiselectTags v-model="value" :multiple="false" />
{{ value }}
</div>
</template>
<script>
export default {
data() {
return {
value: 1
};
}
};
</script>
Multiple tag selector
vue
<template>
<div class="wrapper">
<NcMultiselectTags v-model="value" :multiple="true" />
{{ value }}
</div>
</template>
<script>
export default {
data() {
return {
value: [1, 2]
};
}
};
</script>
Custom filter
Because of compatibility reasons only 5 tag entries are shown by default. If you want to show all available tags set the filter function-prop to null:
vue
<template>
<div class="wrapper">
<NcMultiselectTags v-model="value" :filter="null" />
{{ value }}
</div>
</template>
<script>
export default {
data() {
return {
value: [1, 2]
};
}
};
</script>
It's also possible to apply any custom filter logic by setting the filter function-prop to any custom function receiving the tag element and the index:
vue
<template>
<div class="wrapper">
<NcMultiselectTags v-model="value" :filter="customFilter" />
{{ value }}
</div>
</template>
<script>
export default {
data() {
return {
value: [3]
};
},
methods: {
/**
* Implement your custom filter logic to filter tags delivered
* by the server
*
* @param {object} the tag object
* @param {int} the index of the object inside the collection
*/
customFilter(element, index) {
/*
* Tag objects returned by the server will have the
* following properties (see also api.js):
* id, displayName, canAssign, userAssignable, userVisible
*/
return (
element.id >= 2 &&
element.displayName !== "" &&
element.canAssign &&
element.userAssignable &&
element.userVisible
);
}
}
};
</script>