A dropdown is often something we want to add in Vue apps.
To make our lives easier, we can use a component library to add it.
In this article, we’ll look at how to create a dropdown with Vue-MultiSelect with tags and templates.
Tagging
We can make dropdowns taggable with the taggable prop.
Also, we can add a tag placeholder with the tag-placeholder prop.
The tag-position can change the position of the tag.
For example, we can write:
<template>
<div id="app">
<multiselect
v-model="value"
taggable
multiple
tag-placeholder="Add this as new tag"
tag-position="bottom"
:options="options"
@tag="addTag"
></multiselect>
</div>
</template>
<script> export default { data() { return { value: null, options: ["Vue.js", "React", "Rails"] }; }, methods: { addTag(newTag) { this.options.push(newTag); } } }; </script>
We have the `tag` event handler, which is set to the `addTag` function.
The `newTag` parameter has the new tag.
We see the ‘Add this as new tag’ message if we type in something that’s not a choice already on the list.
After we press enter or click on the message, we can select our new option as well.
### Custom Option Template
We can display the options our way.
For example, we can write:
<template> <div id="app"> <multiselect v-model="value" :options="options"> <template slot="singleLabel" slot-scope="props"> <span>{{ props.option.name }}</span> </template> <template slot="option" slot-scope="props"> <span>{{ props.option.name }} – {{ props.option.lang }}</span> </template> </multiselect> </div> </template>
<script>
export default {
data() {
return {
value: null,
options: [
{ name: "Vue.js", lang: "JavaScript" },
{ name: "React", lang: "JavaScript" },
{ name: "Rails", lang: "Ruby" }
]
};
}
};
</script>
```
In the dropdown, we see both the `name` and `lang` values because we populate the `option` slot with both.
However, when we select an option, we only see the `name` value because we populated the `singleLabel` slot with it.
### Option Groups
We can add option groups to our dropdown.
For example, we can write:
```
<template>
<div id="app">
<multiselect
v-model="value"
:options="options"
group-values="libs"
group-label="language"
track-by="name"
group-select
:custom-label="customLabel"
>
<template slot="noResult">
<span>no result found.</span>
</template>
</multiselect>
</div>
</template>
<script>
export default {
data() {
return {
value: null,
options: [
{
language: "Javascript",
libs: [
{ name: "Vue.js", category: "Front-end" },
{ name: "React", category: "Backend" }
]
},
{
language: "Ruby",
libs: [
{ name: "Rails", category: "Backend" },
{ name: "Sinatra", category: "Backend" }
]
},
{
language: "Other",
libs: [{ name: "Laravel", category: "Backend" }]
}
]
};
},
methods: {
customLabel({ name, category }) {
return ${name} – ${category};
}
}
};
</script>
We can select the whole group with the `group-select` prop.
`group-label` lets us select the field to display as the group label.
`groyup-values` lets us select the fields for the groups.
`options` has all the options.
`custom-label` has the function for displaying a custom label for each entry.
### Custom Configuration
We can add custom configuration for our `multiselect` component.
`max-height` sets its height to whatever we want in pixels.
`max` sets the maximum number of selections.
`allow-empty` doesn’t allow the user to remove the last option if it exists if it’s `false` .
`block-keys` are the keys we want to disable for triggering behavior.
`close` lets us pass in an event handler that runs when the dropdown is closing.
For instance, we can write:
<template> <div id="app"> <multiselect v-model="value" multiple :max="3" :options="options"></multiselect> </div> </template>
<script>
export default {
data() {
return {
value: null,
options: ["foo", "bar", "baz", "qux", "apple"]
};
}
};
</script>
```
Then up to 3 choices can be selected.
Otherwise, we’ll see an error message.
### Events
The `multiselect` component emits various events.
`input` is emitted when the selected value changes.
`select` is emitted when the user selects an option.
`remove` is emitted after removing an option.
`SearchChangew` is emitted when the search query changes.
`tag` is emitted when a user tries to add a tag.
`open` is emitted when the dropdown opens.
`close` is emitted when the dropdown closes.
### Conclusion
Vue-Multiselect is very flexible.
We can change many options like the max height, how many options we can select, and much more.
We can also add tags and change how options are displayed by populating slots.