npm install vue-multiselect --save
The package consist of of multiple files: Multiselect.vue which includes the template and styling of the default component. This component extends 2 additional mixins: multiselectMixin.js and pointerMixin.js , which contain the logic behind the multiselect. This way you can actually use the multiselect logic with your own template and styling.
multiselect(
:selected.sync="selected",
:options="options"
)
import Multiselect from 'vue-multiselect'
export default {
components: { Multiselect },
data () {
return {
selected: null,
options: ['list', 'of', 'options']
}
}
}
Disabled all highlight label text.
{{ valuePrimitive | json }}
multiselect(
:options="options",
:selected.sync="valuePrimitive",
:multiple="false",
:searchable="false",
:close-on-select="false",
:show-labels="false"
placeholder="Select one"
label="name"
)
Can't become empty. Showing custom deselect label.
The selected value is referencing the same object as the next example, to show that dynamic preselection works.
{{ value | json }}
multiselect(
:options="source",
:selected.sync="value",
:multiple="false",
:searchable="false",
:close-on-select="false",
:allow-empty="false",
deselect-label="Can't remove this value"
key="name"
label="name"
placeholder="Select one"
)
The selected value is referencing the same object as the previous example, to show that dynamic preselection works.
{{ value | json }}
multiselect(
:options="source",
:selected.sync="value",
:multiple="false",
:searchable="true",
:custom-label="nameWithLang"
placeholder="Select one",
label="name",
key="name"
)
Limit visible results to 2.
{{ multiValue | json }}
multiselect(
:options="source",
:selected.sync="multiValue",
:multiple="true",
:searchable="true",
:close-on-select="true",
:clear-on-select="false",
placeholder="Pick some"
label="name",
key="name"
)
Changing the search query calls the :on-search-change=""
callback function, passing the search query as param. It also sets the loading = true
.
To disable loading
options have to be updated.
{{ selectedCountries | json }}
multiselect(
:options="countries",
:selected.sync="selectedCountries",
:multiple="multiple",
:searchable="searchable",
placeholder="Type to search",
:on-search-change="asyncFind | debounce 200",
:clear-on-select="false",
label="name"
key="code"
)
span(slot="noResult").
Oops! No elements found. Consider changing the search query.
To enable tagging you have to set up 2 props. :taggable="true" and :on-tag="callback" which should add the tag to both Options and Selected arrays.
{{ taggingSelected | json }}
multiselect(
:options="taggingOptions",
:selected="taggingSelected",
:multiple="multiple",
:searchable="searchable",
:on-tag="addTag",
:on-change="updateSelectedTagging",
:tagging="true"
tag-placeholder="Add this as new tag"
placeholder="Type to search or add tag"
label="name"
key="code"
)
span(slot="noResult").
Oops! No elements found. Consider changing the search query.
addTag (newTag) {
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))
}
this.taggingOptions.push(tag)
this.taggingSelected.push(tag)
},
If set triggers the passed callback function after value changes, passing the new value as param.
For Vuex integration simply remove :reset-after="true"
prop.
May also act as dispatcher for different actions, like in this example.
multiselect(
:options="actions",
:selected="action",
:multiple="false",
:searchable="false",
placeholder="Pick action",
:reset-after="true",
:on-change="dispatchAction"
)
Can't remove the last value and only allow up to 5 selected options.
Hides already selected options.
Shows error when touched, but nothing is selected.
// Template
div(:class="{ 'invalid': isInvalid }")
label.typo__label Must have at least one value
multiselect(
:options="options",
:selected.sync="exampleValue6",
:multiple="true",
:searchable="true",
:allow-empty="false",
:hide-selected="true",
:touched.sync="isTouched",
:max-height="400",
:max="5"
placeholder="Pick at least one"
)
// Script
computed: {
isInvalid () {
return this.isTouched && this.exampleValue6.length === 0
}
}
// Styles
.invalid {
.typo__label {
color: $error-color;
}
.multiselect__tags {
border-color: $error-color !important;
}
}
// multiselectMixin.js
props: {
/**
* Array of available options: Objects, Strings or Integers.
* If array of objects, visible label will default to option.label.
* If `labal` prop is passed, label will equal option['label']
* @type {Array}
*/
options: {
type: Array,
required: true
},
/**
* Equivalent to the `multiple` attribute on a `