@nextcloud/vue

Appearance

Return to top
On this page

NcSelectTags

Props

Prop nameDescriptionTypeValuesDefault
getOptionLabelCallback to generate the label text<br/>@see https://vue-select.org/api/props.html#getoptionlabelfunc-(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
}
multipleAllow selection of multiple options

This prop automatically sets the internal closeOnSelect prop to
its boolean opposite<br/>@see https://vue-select.org/api/props.html#multiple		boolean-true
optionsFilterCallback to filter available optionsfunc-(_element, index) => index < 5
placeholderPlaceholder text<br/>@see https://vue-select.org/api/props.html#placeholderstring-t('Select a tag')
valueCurrently selected valuenumber|array-null
Any available prop<br/>@see https://vue-select.org/api/props.html-

Events

Event namePropertiesDescription
inputEmitted on input events of the multiselect field
All events from https://vue-select.org/api/events.html

Slots

NameDescriptionBindings
defaultAny combination of slots from https://vue-select.org/api/slots.html

Single tag selector

vue
<template>
  <div class="wrapper">
    <NcSelectTags v-model="value" :multiple="false" />
    {{ value }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 1
    };
  }
};
</script>

Multiple tag selector

vue
<template>
  <div class="wrapper">
    <NcSelectTags 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 optionsFilter function-prop to null:

vue
<template>
  <div class="wrapper">
    <NcSelectTags v-model="value" :options-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 optionsFilter function-prop to any custom function receiving the tag element and the index:

vue
<template>
  <div class="wrapper">
    <NcSelectTags v-model="value" :options-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>