vue-multiselect

Universal select/multiselect/tagging component for Vue.js

VueAutocomplete
shentao/vue-multiselectvue-multiselect.js.org/vue-multiselect

README

vue-multiselect Build StatusCodecov branchnpm

Probably the most complete selecting solution for Vue.js 2.0, without jQuery.

Vue 3.0 Support

For Vue 3.0 compatible version see [next](https://github.com/shentao/vue-multiselect/tree/next) branch.

Vue-Multiselect Screen

Documentation

Visit: vue-multiselect.js.org

Sponsors


Get Form

Suade Labs

Storyblok

Vue Mastery logo


Features & characteristics:

NO dependencies
Single select
Multiple select
Tagging
Dropdowns
Filtering
Search with suggestions
Logic split into mixins
Basic component and support for custom components
V-model support
Vuex support
Async options support
\> 95% test coverage
Fully configurable (see props list below)

Breaking changes:

Instead of Vue.partial for custom option templates you can use a custom render function.
The :key props has changed to :track-by, due to conflicts with Vue 2.0.
Support for v-model
@update has changed to @input to also work with v-model
:selected has changed to :value for the same reason
Browserify users: if you wish to import .vue files, please add vueify transform.

Install & basic usage


  1. ``` sh
  2. npm install vue-multiselect
  3. ```

  1. ```vue
  2. <template>
  3.   <div>
  4.     <multiselect
  5.       v-model="selected"
  6.       :options="options">
  7.     </multiselect>
  8.   </div>
  9. </template>
  10. <script>
  11.   import Multiselect from 'vue-multiselect'
  12.   export default {
  13.     components: { Multiselect },
  14.     data () {
  15.       return {
  16.         selected: null,
  17.         options: ['list', 'of', 'options']
  18.       }
  19.     }
  20.   }
  21. </script>
  22. <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
  23. ```

JSFiddle


Example JSFiddle – Use this for issue reproduction.

Examples

in jade-lang/pug-lang

Single select / dropdown

  1. ``` jade
  2. multiselect(
  3.   :value="value",
  4.   :options="source",
  5.   :searchable="false",
  6.   :close-on-select="false",
  7.   :allow-empty="false",
  8.   @input="updateSelected",
  9.   label="name",
  10.   placeholder="Select one",
  11.   track-by="name"
  12. )
  13. ```

Single select with search

  1. ``` jade
  2. multiselect(
  3.   v-model="value",
  4.   :options="source",
  5.   :close-on-select="true",
  6.   :clear-on-select="false",
  7.   placeholder="Select one",
  8.   label="name",
  9.   track-by="name"
  10. )
  11. ```

Multiple select with search

  1. ``` jade
  2. multiselect(
  3.   v-model="multiValue",
  4.   :options="source",
  5.   :multiple="true",
  6.   :close-on-select="true",
  7.   placeholder="Pick some",
  8.   label="name",
  9.   track-by="name"
  10. )
  11. ```

Tagging

with @tag event
  1. ``` jade
  2. multiselect(
  3.   v-model="taggingSelected",
  4.   :options="taggingOptions",
  5.   :multiple="true",
  6.   :taggable="true",
  7.   @tag="addTag",
  8.   tag-placeholder="Add this as new tag",
  9.   placeholder="Type to search or add tag",
  10.   label="name",
  11.   track-by="code"
  12. )
  13. ```

  1. ``` javascript

  3. addTag (newTag) {
  4.   const tag = {
  5.     name: newTag,
  6.     code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
  7.   }
  8.   this.taggingOptions.push(tag)
  9.   this.taggingSelected.push(tag)
  10. },
  11. ```

Asynchronous dropdown

  1. ``` jade
  2. multiselect(
  3.   v-model="selectedCountries",
  4.   :options="countries",
  5.   :multiple="multiple",
  6.   :searchable="searchable",
  7.   @search-change="asyncFind",
  8.   placeholder="Type to search",
  9.   label="name"
  10.   track-by="code"
  11. )
  12.   span(slot="noResult").
  13.     Oops! No elements found. Consider changing the search query.
  14. ```

  1. ``` javascript
  2. methods: {
  3.   asyncFind (query) {
  4.     this.countries = findService(query)
  5.   }
  6. }
  7. ```

Contributing


  1. ``` bash
  2. # serve with hot reload at localhost:8080
  3. npm run dev

  5. # distribution build with minification
  6. npm run bundle

  8. # build the documentation into docs
  9. npm run docs

  11. # run unit tests
  12. npm run test

  14. # run unit tests watch
  15. npm run unit

  17. ```

For detailed explanation on how things work, checkout the guide and docs for vue-loader.