Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
vue-multiselect
Advanced tools
Readme
Documentation 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
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>
Example JSFiddle – Use this for issue reproduction.
<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"
/>
<VueMultiselect
v-model="value"
:options="source"
:close-on-select="true"
:clear-on-select="false"
placeholder="Select one"
label="name"
track-by="name"
/>
<VueMultiselect
v-model="multiValue"
:options="source"
:multiple="true"
:close-on-select="true"
placeholder="Pick some"
label="name"
track-by="name"
/>
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)
},
<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)
}
}
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
# distribution build with minification
npm run bundle
# run unit tests
npm run test
FAQs
Multiselect component for Vue 3
The npm package vue-multiselect receives a total of 195,383 weekly downloads. As such, vue-multiselect popularity was classified as popular.
We found that vue-multiselect demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.