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

Property
Default
Accepted values
Description
values
none
Array or Function
List of items. It can be an array with items, or a function, what is resulted an array. The item can be a String or an object. You can use id and key (under selectOptions) to select any properties of that object as value or name.
max
none
Number
Number of allowed selected options.
selectOptions
{}
Object
Settings to select component. See details below.

selectOptions

For more details, see the official Vue-multiselect documentation.
Property
Default
Accepted values
Description
id
none
Integer or String
Used to identify the component in events.
multiple
false
Boolean
Equivalent to the multiple attribute on a input.
trackBy
none
String
Used to compare objects. Only use if options are objects.
label
none
String
Label from option Object, that will be visible in the dropdown.
searchable
true
Boolean
Add / removes search input.
clearOnSelect
true
Boolean
Clear the search input after selection. Use only when multiple is true.
hideSelected
false
Boolean
Hide already selected options
allowEmpty
true
Boolean
Allows to remove all selected values. Otherwise one must be left selected.
resetAfter
false
Boolean
Reset internal this.value, this.search, this.selected after this.value changes.
closeOnSelect
true
Boolean
Enable/disable closing after selecting an option
customLabel
none
Function => String
Function used to create a custom label
taggable
false
Boolean
Disable / Enable tagging
tagPlaceholder
'Press enter to create a tag'
String
String to show when highlighting a potential tag
optionsLimit
1000
Number
Limits the options displayed in the dropdown to the first X options.
groupValues
none
String
Name of the property containing the group values
groupLabel
none
String
Name of the property containing the group label
blockKeys
[]
Array
Array of keyboard key aliases to block when selecting
internalSearch
true
Boolean
Decide whether to filter the results based on search query. Useful for async filtering, where we search through more complex data.
selectLabel
'Press enter to select'
String
String to show when pointing to an option
selectedLabel
'Selected'
String
String to show next to selected option
deselectLabel
'Press enter to remove'
String
String to show when pointing to an already selected option
showLabels
true
Boolean
Decide whether to show labels on highlighted options
limit
99999
Number
Limit the display of selected options. The rest will be hidden within the limitText string.
limitText
count => `and ${count} more`
Function => String
Function that process the message shown when selected elements pass the defined limit.
loading
false
Boolean
Show/hide the loading spinner.
maxHeight
300
Integer
Sets max-height style value of the dropdown
showPointer
true
Boolean
Enable/disable highlighting of the pointed value.
onSearch
none
Function(searchQuery, id, options)
Emitted after the search query changes
onNewTag
none
Function(newTag, id, options, value)
Emitted after user attempt to add a tag

Usage

Simple select primitive:

1
{
2
type: "vueMultiSelect",
3
label: "Country",
4
placeholder: "Select a country",
5
model: "address.country",
6
required: true,
7
validator: validators.required,
8
values: faker.definitions.address.country,
9
selectOptions: {
10
multiSelect: false,
11
closeOnSelect: false,
12
searchable: false,
13
showLabels: false
14
}
15
}
Copied!

Simple select object:

1
{
2
type: "vueMultiSelect",
3
model: "library",
4
label: "Libraries",
5
placeholder: "Select your favorite library",
6
required: true,
7
validator: validators.required,
8
selectOptions: {
9
multiple: false,
10
key: "name",
11
label: "name",
12
searchable: false,
13
closeOnSelect: false,
14
allowEmpty:false
15
},
16
values: [
17
{
18
"name": "Vue.js",
19
"language": "JavaScript"
20
},
21
{
22
"name": "Rails",
23
"language": "Ruby"
24
},
25
{
26
"name": "Sinatra",
27
"language": "Ruby"
28
}
29
]
30
}
Copied!
1
{
2
type: "vueMultiSelect",
3
model: "library",
4
label: "Libraries",
5
placeholder: "Select your favorite library",
6
required: true,
7
validator: validators.required,
8
selectOptions: {
9
multiple: false,
10
key: "name",
11
label: "name",
12
searchable: true,
13
customLabel: function({ name, language }) {
14
return `${name} — [${language}]`
15
}
16
},
17
values: [
18
{
19
"name": "Vue.js",
20
"language": "JavaScript"
21
},
22
{
23
"name": "Rails",
24
"language": "Ruby"
25
},
26
{
27
"name": "Sinatra",
28
"language": "Ruby"
29
}
30
]
31
}
Copied!
1
{
2
type: "vueMultiSelect",
3
model: "library",
4
label: "Libraries",
5
placeholder: "Select your favorite library",
6
required: true,
7
validator: validators.required,
8
selectOptions: {
9
multiple: true,
10
key: "name",
11
label: "name",
12
searchable: true,
13
clearOnSelect: false,
14
closeOnSelect: false,
15
limit:2 // limits the visible results to 2
16
},
17
values: [
18
{
19
"name": "Vue.js",
20
"language": "JavaScript"
21
},
22
{
23
"name": "Rails",
24
"language": "Ruby"
25
},
26
{
27
"name": "Sinatra",
28
"language": "Ruby"
29
}
30
]
31
}
Copied!

Asynchronous select:

1
{
2
type: "vueMultiSelect",
3
model: "countries",
4
label: "Countries ",
5
placeholder: "Type to search",
6
required: true,
7
validator: validators.required,
8
selectOptions: {
9
multiple: true,
10
key: "code",
11
label: "name",
12
searchable: true,
13
localSearch: false,
14
clearOnSelect: false,
15
closeOnSelect: false,
16
onSearch: function(searchQuery, id, options) {
17
if (searchQuery.length === 0) {
18
this.countries = []
19
} else {
20
this.isLoading = true
21
setTimeout(() => {
22
this.countries = countries.filter(function(element, index, array) {
23
return element.name.toLowerCase().includes(searchQuery.toLowerCase())
24
})
25
this.isLoading = false
26
}, 1000)
27
}
28
},
29
},
30
onChanged: function(model, newVal, oldVal, field) {
31
model.selectedCountries = newVal
32
},
33
values: [
34
{
35
"name": "Vue.js",
36
"language": "JavaScript"
37
},
38
{
39
"name": "Rails",
40
"language": "Ruby"
41
},
42
{
43
"name": "Sinatra",
44
"language": "Ruby"
45
}
46
]
47
}
Copied!

Tagging:

1
{
2
type: "vueMultiSelect",
3
model: "library",
4
label: "Libraries",
5
placeholder: "Type to search or add tag",
6
required: true,
7
validator: validators.required,
8
selectOptions: {
9
multiple: true,
10
key: "code",
11
label: "name",
12
searchable: true,
13
taggable: true,
14
tagPlaceholder: "Add this as new tag",
15
onNewTag: function(newTag, id, options, value){
16
const tag = {
17
name: newTag,
18
// Just for example needs as we use Array of Objects that should have other properties filled.
19
// For primitive values you can simply push the tag into options and selected arrays.
20
code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
21
}
22
options.push(tag);
23
value.push(tag);
24
}
25
},
26
onChanged: function(model, newVal, oldVal, field) {
27
console.log('@tag: ', newVal);
28
},
29
values: [
30
{
31
"name": "Javascript",
32
"code": "js"
33
},
34
{
35
"name": "Monterail",
36
"code": "pl"
37
},
38
{
39
"name": "Open Source",
40
"code": "os"
41
},
42
{
43
"name": "Vue.js",
44
"code": "vu"
45
}
46
]
47
}
Copied!

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:
1
<template>
2
<!-- template here -->
3
</template>
4
<script>
5
// Script here
6
</script>
7
8
<!-- include the vue-multiselect CSS -->
9
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
10
11
<style>
12
/* your styles here */
13
</style>
Copied!
Last modified 2yr ago