Multiselect component for Vue 3
npm install @suadelabs/vue3-multiselectFeel free to check out our story of how we upgraded our product to Vue 3 on our blog at suade.org
``bash`
npm install @suadelabs/vue3-multiselect
`vue
:options="options">
`
jade
multiselect(
: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
` jade
multiselect(
v-model="value",
:options="source",
:close-on-select="true",
:clear-on-select="false",
placeholder="Select one",
label="name",
track-by="name"
)
`$3
` jade
multiselect(
v-model="multiValue",
:options="source",
:multiple="true",
:close-on-select="true",
placeholder="Pick some",
label="name",
track-by="name"
)
`$3
with @tag event
` jade
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"
)
`` 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
` jade
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.
`` javascript
methods: {
asyncFind (query) {
this.countries = findService(query)
}
}
`Contributing
` bash
distribution build with minification
npm run bundlerun unit tests
npm run test``