Vue-Select library: How to limit number of characters entered as a tag?

Question

I am using the Vue-Select library to allow my users to submit tags for a post like so:

How can I limit the number of characters per word (lets say not more than 10 chars) using this library?

Do I handle the logic within the createOption prop ?

  <v-select
    v-model="selected"
    :options="options"
    class="form-control"
    :id="id"
    multiple
    taggable
    :loading="loading"
    :dropdown-should-open="dropdownShouldOpen"
    placeholder="add a tag..."
    :create-option="createOption" //<---- limit the number of chars using this prop?
    :select-on-key-codes="[32]"
  >

const createOption = (option) => {
  //...something here??
}

This leads me to my next question....do I allow the user to submit the tag and then I will provide validation feedback after it has been entered or or is there a way to add a maxLength property to this tag input? Looking for suggestions.

Answer 1

After some searching, I discovered that you can add a scoped slot to the component like so:

<v-select>
  <template #search="{events, attributes}">
    <input class="vs__search" v-on="events" v-bind="attributes" maxlength="2" />
  </template>
</v-select>

https://github.com/sagalbot/vue-select/issues/241#issuecomment-596250097