Vue.js Multiselect Dropdown
We can create multiple selection dropdown options using attribute multiple=”true”. Here in this article, we are going to explain how you can create multiple dropdown select box in Vuejs. You can also use our online editor to edit and run the code online.
How to Create Multiple Selection Dropdown?
You can create multi select dropdown simply as below-
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<select multiple="true" v-bind:class="{ 'fix-height': multiple === 'true' }" v-model="multipleSelect" style="width:150px;">
<option v-for="item in items" :value="item">
{{item}}
</option>
</select>
{{ multipleSelect }}
</div>
<script>
new Vue({
el: '#app',
data: function() {
return {
multipleSelect: [""],
data: null,
multiple: "true",
items:["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
}
},
created() {
console.log("selections: ",this.multipleSelections);
}
});
</script>
</body>
</html>
|
Output of above example-
Advertisements
