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
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" />
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>