Multiselect component for Vue
npm install vue-multiselectDocumentation for v3.0.0 is almost the same as for v2.x as it is mostly backward compatible. For the full docs for v3 and previous versions, check out: vue-multiselect.js.org
``bash`
npm install vue-multiselect
`vue
:options="options">
`
Example JSFiddle – Use this for issue reproduction.
vue
: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"
/>
`$3
`vue
v-model="value"
:options="source"
:close-on-select="true"
:clear-on-select="false"
placeholder="Select one"
label="name"
track-by="name"
/>
`$3
`vue
v-model="multiValue"
:options="source"
:multiple="true"
:close-on-select="true"
placeholder="Pick some"
label="name"
track-by="name"
/>
`$3
with @tag event
`vue
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"
/>
`` javascriptaddTag (newTag) {
const tag = {
name: newTag,
code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
}
this.taggingOptions.push(tag)
this.taggingSelected.push(tag)
},
`$3
`vue
v-model="selectedCountries"
:options="countries"
:multiple="multiple"
:searchable="searchable"
@search-change="asyncFind"
placeholder="Type to search"
label="name"
track-by="code"
>
Oops! No elements found. Consider changing the search query.
`` javascript
methods: {
asyncFind (query) {
this.countries = findService(query)
}
}
`⚠️ Build Tool Compatibility
vue-multiselect requires Vue's Options API to function properly. There are known issues with certain versions of
@vitejs/plugin-vue that may inadvertently disable the Options API.$3
If you're experiencing issues after updating
@vitejs/plugin-vue to version 5.2.2 or later, consider downgrading to version 5.2.1:`bash
npm install @vitejs/plugin-vue@5.2.1
`This issue occurs because changes in the plugin's configuration handling can disable the Options API even when not explicitly configured. See issue #1901 for more details.
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
` bash
distribution build with minification
npm run bundlerun unit tests
npm run test``