@khainv2k/vue-multiselect

vue-multiselect

Documentation for version 3

Documentation for v3.0.0 is almost the same as for v2.x as it is mostly backward compatible. For the full docs for v2.x, check out: vue-multiselect.js.org The differences between the two major versions are listed below:

Events

input is now update:modelValue. This is so v-model works in Vue 3.

Sponsors

Install & basic usage

npm install vue-multiselect@next

<template>
  <div>
    <VueMultiselect
      v-model="selected"
      :options="options">
    </VueMultiselect>
  </div>
</template>

<script>
import VueMultiselect from 'vue-multiselect'
export default {
  components: { VueMultiselect },
  data () {
    return {
      selected: null,
      options: ['list', 'of', 'options']
    }
  }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>

Examples

Single select / dropdown

<VueMultiselect
  :model-value="value"
  :options="source"
  :searchable="false"
  :close-on-select="false"
  :allow-empty="false"
  @update:model-value="updateSelected"
  label="name"
  placeholder="Select one"
  track-by="name"
/>

Single select with search

<VueMultiselect
  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

<VueMultiselect
  v-model="multiValue"
  :options="source"
  :multiple="true"
  :close-on-select="true"
  placeholder="Pick some"
  label="name"
  track-by="name"
/>

Tagging

with @tag event

<VueMultiselect
  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

<VueMultiselect
  v-model="selectedCountries"
  :options="countries"
  :multiple="multiple"
  :searchable="searchable"
  @search-change="asyncFind"
  placeholder="Type to search"
  label="name"
  track-by="code"
>
  <template #noResult>
    Oops! No elements found. Consider changing the search query.
  </template>
</VueMultiselect>

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

Special Thanks

Thanks to Matt Elen for contributing this version!

A Vue 3 upgrade of @shentao's vue-mulitselect component. The idea is that when you upgrade to Vue 3, you can swap the two components out, and everything should simply work. Feel free to check out our story of how we upgraded our product to Vue 3 on our blog at suade.org

Contributing

# distribution build with minification
npm run bundle

# run unit tests
npm run test