Multiple selection is often a feature added to web apps to let users select multiple items at once.
Vue apps can use the Vue-Multiselect library to add this feature.
In this article, we’ll look at how to use this package to add a multi-select drop down.
Basic Single Select
We can get started by writing the following code:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"
/>
</head>
<body>
<div id="app">
<vue-multiselect v-model="value" :options="options"></vue-multiselect>
</div>
<script src="index.js"></script>
</body>
</html>
index.js:
Vue.component("vue-multiselect", window.VueMultiselect.default);
new Vue({
el: "#app",
data: {
value: "",
options: ["apple", "orange", "grape"]
}
});
In the code above, we added the Vue-Multiselect library with the following script and link tags in index.html:
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"
/>
for the code and styles respectively.
Then we registered the component with:
Vue.component("vue-multiselect", window.VueMultiselect.default);
Then we added the options for our dropdown choices:
options: ["apple", "orange", "grape"]
Finally, in our template, we added:
<vue-multiselect v-model="value" :options="options"></vue-multiselect>
After that, we should see a drop down showning on the screen with those choices listed in the options.
Single Select with Objects
In the code above, we have an array of strings, but we can also use an array of objects as options.
We just have to change our example above slightly to let user select objects:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"
/>
</head>
<body>
<div id="app">
<vue-multiselect
track-by="name"
label="name"
v-model="value"
:options="options"
></vue-multiselect>
<p>{{value}}</p>
</div>
<script src="index.js"></script>
</body>
</html>
index.js:
Vue.component("vue-multiselect", window.VueMultiselect.default);
new Vue({
el: "#app",
data: {
value: "",
options: [
{ name: "Vue.js", language: "JavaScript" },
{ name: "Rails", language: "Ruby" },
{ name: "Sinatra", language: "Ruby" }
]
}
});
In the code above, we added the track-by1 andlabelprops to enable the library to track changes in object by itsname` property.
Multiple Select
All we have to do to enable multiple selection is to set the multiple prop to true.
We just have to revise the example above by changing index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"
/>
</head>
<body>
<div id="app">
<vue-multiselect
track-by="name"
label="name"
v-model="value"
:options="options"
:multiple="true"
></vue-multiselect>
<p>{{value}}</p>
</div>
<script src="index.js"></script>
</body>
</html>
Then we’ll see the values that are selected in the p tag.
Async Selection
The options doesn’t have to be set synchronously. We can also populate it with data from an async source as in the following example:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"
/>
</head>
<body>
<div id="app">
<vue-multiselect
track-by="name"
label="name"
v-model="value"
:options="options"
:multiple="true"
></vue-multiselect>
<p>{{value}}</p>
</div>
<script src="index.js"></script>
</body>
</html>
index.js:
Vue.component("vue-multiselect", window.VueMultiselect.default);
new Vue({
el: "#app",
data: {
value: "",
options: []
},
async beforeMount() {
this.options = await Promise.resolve([
{ name: "Vue.js", language: "JavaScript" },
{ name: "Rails", language: "Ruby" },
{ name: "Sinatra", language: "Ruby" }
]);
}
});
The code above populates the options from the resolved value of a promise, but we don’t have to make any changes to the template code.
Conclusion
The Vue-Multiselect lets us create a dropdown that works in various ways like single select, multiselect, and displaying a searchable drop down.
It can take options from synchronous and asynchronous sources.
