vueMultiSelect

Search…
vueMultiSelect
Probably the most complete selecting solution for Vue.js, without jQuery.
Please note, this field depends on the following library:
​Vue-multiselect​
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
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!
Select with search:
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!
Multiselect with search:
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!
switch
Custom Fields
Last modified 3yr ago
Copy link
Contents
Special properties of field
selectOptions
Usage
CSS