vue-multiselect

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 branch.

Documentation

Visit: vue-multiselect.js.org

Sponsors

Gold

Silver

Bronze

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

npm install vue-multiselect

<template>
<div>
<multiselectv-model="selected":options="options">
</multiselect>
</div>
</template>
<script>importMultiselectfrom'vue-multiselect'exportdefault { components: { Multiselect },data () {return { selected:null, options: ['list', 'of', 'options'] } } }</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

JSFiddle

Example JSFiddle – Use this for issue reproduction.

Examples

in jade-lang/pug-lang

Single select / dropdown

multiselect(:value="value",
:options="source",
:searchable="false",
:close-on-select="false",
:allow-empty="false",
@input="updateSelected",
label="name",
placeholder="Select one",
track-by="name")

Single select with search

multiselect(v-model="value",
:options="source",
:close-on-select="true",
:clear-on-select="false",
placeholder="Select one",
label="name",
track-by="name")

Multiple select with search

multiselect(v-model="multiValue",
:options="source",
:multiple="true",
:close-on-select="true",
placeholder="Pick some",
label="name",
track-by="name")

Tagging

with @tag event

multiselect(v-model="taggingSelected",
:options="taggingOptions",
:multiple="true",
:taggable="true",
@tag="addTag",
tag-placeholder="Add this as new tag",
placeholder="Type to search or add tag",
label="name",
track-by="code")

addTag(newTag){consttag={name: newTag,code: newTag.substring(0,2)+Math.floor((Math.random()*10000000))}this.taggingOptions.push(tag)this.taggingSelected.push(tag)},

Asynchronous dropdown

multiselect(v-model="selectedCountries",
:options="countries",
:multiple="multiple",
:searchable="searchable",
@search-change="asyncFind",
placeholder="Type to search",
label="name"track-by="code")
span(slot="noResult").
Oops! No elements found. Consider changing the search query.

methods: {asyncFind(query){this.countries=findService(query)}}

Contributing

# serve with hot reload at localhost:8080
npm run dev
# distribution build with minification
npm run bundle
# build the documentation into docs
npm run docs
# run unit tests
npm run test# run unit tests watch
npm run unit

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