Skip to content
master
Go to file
Code

Latest commit

* Update README.md

Wrap poster into link to vue-multiselect.js.org

* Update README.md

Added `alt` attribute to `img` element
ac46a71

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Oct 29, 2017
Apr 27, 2019
Mar 1, 2019
Dec 17, 2016
v1
Jul 1, 2017
Oct 29, 2017
Mar 1, 2019

README.md

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
<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options">
    </multiselect>
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'
  export default {
    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) {
  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.

You can’t perform that action at this time.