Nero Punished Miscreants

    vue-multiselect
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.6 • Public • Published

    vue-multiselect Build StatusCodecov branchnpm

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

    Vue-Multiselect Screen

    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.

    Keywords

    none

    Install

    npm i vue-multiselect

    DownloadsWeekly Downloads

    253,338

    Version

    2.1.6

    License

    MIT

    Unpacked Size

    118 kB

    Total Files

    11

    Last publish

    Collaborators

    • mattelen
    • shentao