vueMultiSelect
Probably the most complete selecting solution for Vue.js, without jQuery.
Please note, this field depends on the following library:
Special properties of field
selectOptions
selectOptions
For more details, see the official Vue-multiselect documentation.
Usage
Simple select primitive:
{
type: "vueMultiSelect",
label: "Country",
placeholder: "Select a country",
model: "address.country",
required: true,
validator: validators.required,
values: faker.definitions.address.country,
selectOptions: {
multiSelect: false,
closeOnSelect: false,
searchable: false,
showLabels: false
}
}
Simple select object:
{
type: "vueMultiSelect",
model: "library",
label: "Libraries",
placeholder: "Select your favorite library",
required: true,
validator: validators.required,
selectOptions: {
multiple: false,
key: "name",
label: "name",
searchable: false,
closeOnSelect: false,
allowEmpty:false
},
values: [
{
"name": "Vue.js",
"language": "JavaScript"
},
{
"name": "Rails",
"language": "Ruby"
},
{
"name": "Sinatra",
"language": "Ruby"
}
]
}
Select with search:
{
type: "vueMultiSelect",
model: "library",
label: "Libraries",
placeholder: "Select your favorite library",
required: true,
validator: validators.required,
selectOptions: {
multiple: false,
key: "name",
label: "name",
searchable: true,
customLabel: function({ name, language }) {
return `${name} — [${language}]`
}
},
values: [
{
"name": "Vue.js",
"language": "JavaScript"
},
{
"name": "Rails",
"language": "Ruby"
},
{
"name": "Sinatra",
"language": "Ruby"
}
]
}
Multiselect with search:
{
type: "vueMultiSelect",
model: "library",
label: "Libraries",
placeholder: "Select your favorite library",
required: true,
validator: validators.required,
selectOptions: {
multiple: true,
key: "name",
label: "name",
searchable: true,
clearOnSelect: false,
closeOnSelect: false,
limit:2 // limits the visible results to 2
},
values: [
{
"name": "Vue.js",
"language": "JavaScript"
},
{
"name": "Rails",
"language": "Ruby"
},
{
"name": "Sinatra",
"language": "Ruby"
}
]
}
Asynchronous select:
{
type: "vueMultiSelect",
model: "countries",
label: "Countries ",
placeholder: "Type to search",
required: true,
validator: validators.required,
selectOptions: {
multiple: true,
key: "code",
label: "name",
searchable: true,
localSearch: false,
clearOnSelect: false,
closeOnSelect: false,
onSearch: function(searchQuery, id, options) {
if (searchQuery.length === 0) {
this.countries = []
} else {
this.isLoading = true
setTimeout(() => {
this.countries = countries.filter(function(element, index, array) {
return element.name.toLowerCase().includes(searchQuery.toLowerCase())
})
this.isLoading = false
}, 1000)
}
},
},
onChanged: function(model, newVal, oldVal, field) {
model.selectedCountries = newVal
},
values: [
{
"name": "Vue.js",
"language": "JavaScript"
},
{
"name": "Rails",
"language": "Ruby"
},
{
"name": "Sinatra",
"language": "Ruby"
}
]
}
Tagging:
{
type: "vueMultiSelect",
model: "library",
label: "Libraries",
placeholder: "Type to search or add tag",
required: true,
validator: validators.required,
selectOptions: {
multiple: true,
key: "code",
label: "name",
searchable: true,
taggable: true,
tagPlaceholder: "Add this as new tag",
onNewTag: function(newTag, id, options, value){
const tag = {
name: newTag,
// Just for example needs as we use Array of Objects that should have other properties filled.
// For primitive values you can simply push the tag into options and selected arrays.
code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
}
options.push(tag);
value.push(tag);
}
},
onChanged: function(model, newVal, oldVal, field) {
console.log('@tag: ', newVal);
},
values: [
{
"name": "Javascript",
"code": "js"
},
{
"name": "Monterail",
"code": "pl"
},
{
"name": "Open Source",
"code": "os"
},
{
"name": "Vue.js",
"code": "vu"
}
]
}
CSS
You have to include the vue-multiselect CSS somewhere. It can be added as a static asset to your application, or inside a component. See here for details.
For example, to include in a component:
<template>
<!-- template here -->
</template>
<script>
// Script here
</script>
<!-- include the vue-multiselect CSS -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style>
/* your styles here */
</style>
Last updated