How to disable or hide Tags using Vueform/multiselect librabry?

Question

I've got the following code and it's working fine. When I click in the search bar a dropdown shows up and when I select an option, the tag is displayed in the search bar. I'd like to hide or disable it but I can't find anything to solve that in the documentation.

Link to the image of how the dropdown currently looks like https://i.sstatic.net/u9CLv.jpg

<template>
  <div>
    <Multiselect
      v-model="value"
      mode="tags"
      :hideSelected="false"
      :caret="false"
      :close-on-select="false"
      :searchable="true"
      :create-option="true"
      :options="options"
    />
    
    {{ value }}
  </div>
</template>
<script>
import Multiselect from "@vueform/multiselect";
export default {
  components: {
    Multiselect,
  },
  data() {
    return {
      value: [],
      options: [
        { value: "batman", label: "Batman" },
        { value: "robin", label: "Robin" },
        { value: "joker", label: "Joker" },
      ],
    };
  },
};
</script>
<style src="@vueform/multiselect/themes/default.css"></style>


  [1]: https://i.sstatic.net/u9CLv.jpg

Answer 1

One solution is to set the mode to multiple instead of tags.

When options are selected in multiple mode, the search bar indicates the number of options selected instead of their values:

<Multiselect mode="multiple" />

demo 1

If you prefer that label be the placeholder, a workaround is to specify multipleLabel as a function that returns the placeholder string:

<template>
  <Multiselect mode="multiple"
               placeholder="Characters"
               :multipleLabel="() => 'Characters'"
               />
</template>

<style scoped>
/* keep the multiple-label text light */
:deep(.multiselect-multiple-label) {
  color: #ababab;
}
</style>

demo 2