To create a dropdown is not an easy task when we need more styling. Vue has a solution for it. Vue has a Multiselect library which helps us to create beautiful dropdowns as we want. You can implement single/multi select, searchable,dropdowns,tagging, server-side rendering etc are possible through this library. You can install Vue-Multiselect by running the npm command.

npm install vue-multiselect --save

Another option to use the library is to add CSS that is associated with the package through CDN.

<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">

We have a multiselect component with a v-model to bind to the value state. The options prop has an array of strings and we set it to options. Add the below lines of codes to your component.

<template>

  <div>

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

    <p>{{value}}</p>

  </div>

</template>

<script>

import Multiselect from "vue-multiselect";

export default {

  components: { Multiselect },

  data() {

    return {

      value: null,

      options: ["foo", "baz", "baz"]

    };

  }

};

</script>

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

As I have already mentioned, Vue.js multiselect library provides features like search, tagging, Asynchronous select, multiple select, single select(object). 

Single Select

This doesn’t need any new configurations. You can set searchables=”false”, :close-on-select=”false”, :show-labels=”false”.

Example code:

import Multiselect from 'vue-multiselect'

export default {

  components: {

    Multiselect

  },

  data () {

    return {

      value: '',

      options: ['Select option', 'options', 'selected', 'multiple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']

    }

  }

}

Single select[object]

You must provide additional props like label,track-by when using objects.Optional configuration flags for single select with objects is:

:searchable=”false”, :allow-empty="false", deselect-label="Can't remove this value".

Example code:

import Multiselect from 'vue-multiselect'

export default {

  components: {

    Multiselect

  },

  data () {

    return {

      value: null,

      options: [

        { name: 'Vue.js', language: 'JavaScript' },

        { name: 'Rails', language: 'Ruby' },

        { name: 'Sinatra', language: 'Ruby' },

        { name: 'Laravel', language: 'PHP', $isDisabled: true },

        { name: 'Phoenix', language: 'Elixir' }

      ]

    }

  }

}

Select with search

In this type searchable is set as true by default. Search is performed based on the label prop. 

Example:

import Multiselect from 'vue-multiselect'

export default {

  components: {

    Multiselect

  },

  data () {

    return {

      value: { name: 'Vue.js', language: 'JavaScript' },

      options: [

        { name: 'Vue.js', language: 'JavaScript' },

        { name: 'Rails', language: 'Ruby' },

        { name: 'Sinatra', language: 'Ruby' },

        { name: 'Laravel', language: 'PHP' },

        { name: 'Phoenix', language: 'Elixir' }

      ]

    }

  },

  methods: {

    nameWithLang ({ name, language }) {

      return `${name} — [${language}]`

    }

  }

}

Multi select

To allow multi select pass the prop :multiple=”true”. The optional configuration flags are :close-on-select="false", :clear-on-select="false".

Example:

import Multiselect from 'vue-multiselect'

export default {

  components: {

    Multiselect

  },

  data () {

    return {

      value: [],

      options: [

        { name: 'Vue.js', language: 'JavaScript' },

        { name: 'Adonis', language: 'JavaScript' },

        { name: 'Rails', language: 'Ruby' },

        { name: 'Sinatra', language: 'Ruby' },

        { name: 'Laravel', language: 'PHP' },

        { name: 'Phoenix', language: 'Elixir' }

      ]

    }

  }

}

Tagging

To add tags set the prop :taggable=”true”. Optional configuration flags are tag-placeholder="Add this as new tag", tag-position="bottom". 

Example:

import Multiselect from 'vue-multiselect'

export default {

  components: {

    Multiselect

  },

  data () {

    return {

      value: [

        { name: 'Javascript', code: 'js' }

      ],

      options: [

        { name: 'Vue.js', code: 'vu' },

        { name: 'Javascript', code: 'js' },

        { name: 'Open Source', code: 'os' }

      ]

    }

  },

  methods: {

    addTag (newTag) {

      const tag = {

        name: newTag,

        code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))

      }

      this.options.push(tag)

      this.value.push(tag)

    }

  }

}