Vue-MultiSelect — Tags and Templates
By: John Au-Yeung
Tags: JavaScript, Software Development, Programming, Technology, Web Development

Photo by Colin Maynard on Unsplash

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.

Photo by Behzad Ghaffarian on Unsplash

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.