Need help with vue-multiselect?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

shentao
5.9K Stars 884 Forks MIT License 430 Commits 340 Opened issues

Description

Universal select/multiselect/tagging component for Vue.js

Services available

!
?

Need anything else?

Contributors list

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

Vue-Multiselect Screen

Documentation

Visit: vue-multiselect.js.org

Sponsors

Gold

Vuejs Amsterdam

Vue - The Road To Enterprise

Suade Labs

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.