vue-multiselect

by shentao

Universal select/multiselect/tagging component for Vue.js

5.5K Stars 811 Forks Last release: over 1 year ago (2.1.6) MIT License 418 Commits 33 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

vue-multiselect Build StatusCodecov branchnpm

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

Vue-Multiselect Screen

Documentation

Visit: vue-multiselect.js.org

Sponsors

Silver

Storyblok

Bronze

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

npm install vue-multiselect


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
jade
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) {
  const tag = {
    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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.