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-


<!DOCTYPE html>
 <script src=""></script>
<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">
{{ multipleSelect }}
 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);

Try it »

Output of above example-

Vue.Js multiselect dropdown


Add Comment

📖 Read More