Create MultiSelect Dropdown using vue-multiselect

If you are working with bootstrap vue you might be noticed that bootstrap-vue doesn't have a searchable multi-select drop down yet. There are a lot of other vue plugins that provide this feature. I found vue-multiselect as a better one. It supports searchable multi-select dropdown with Vuex. It also has multiple props that can be used to parse option data. Let us create a simple vue-multi-select dropdown .

Step 1: Install vue/multiselect via npm

          npm install vue-multiselect --save

Step 2: Import multiselect component inside vue file where ever its is used

             <template>

             </template>

             <script>

             import Multiselect from "vue-multiselect";

             export default {

             name: "SearchManagedObjectsForm",

             components:{

                 Multiselect

              },

             data() {

               }

            }

</script>

Step 3: Import CSS Style of vue-multiselect

    <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

Step 4: Singleselect component can be used by adding <multiselect> tag with minimal properties like below

  <multiselect v-model="selected" :options="options"></multiselect>

above HTML creates the single select drop down with given options . options should be provided via vue data object

    data() {
      return {
    selected:"",
options: ['option1', 'option2', 'option3']
       }
    }
  }

"selected" is a modal variable which holds the selected drop down value

Step5:  Enable multiple props to the multiselect component

To make select drop down to allow multiple value selection enable multiple property to true

 

<multiselect v-model="selected" :multiple="true" options="options"></multiselect>