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.stack.imgur.com/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.stack.imgur.com/u9CLv.jpg
One solution is to set the
mode
tomultiple
instead oftags
.When options are selected in
multiple
mode, the search bar indicates the number of options selected instead of their values:demo 1
If you prefer that label be the placeholder, a workaround is to specify
multipleLabel
as a function that returns the placeholder string:demo 2