{{ value }}Multiselect Open: {{ isOpen }}
7 |
8 | {{ value }}{{ value }}{{ value }}{{ value }}The component may also act as dispatcher for different actions/methods. In this case there is no need for the
4 | :modelValue prop.
5 | Instead of @update:modelValue you can listen on the @select event. The difference
6 | between the two
7 | is that @select only receives the currently selected value instead of the whole list of selected
8 | values (if select is multiple).
:reset-after="true" – Resets the internal value after each select action inside the component.
12 | Shows error when touched, but nothing is selected.
4 |:max-height="150" – Set the dropdown height to 150px:max="3" – Set the maximal number of selections:allow-empty="false" – Doesn’t allow to remove the last option if it exists:prevent-autofocus="true" – Doesn’t focus to input search on open:block-keys="['Tab', 'Enter']" – Block the Tab and Enter keys from
11 | triggering their default behaviour
12 | @close="onTouch" – Event emitted when closing the dropdownYou can use option scoped slot
5 | to provide a custom option template. The available props include props.option and props.search.
6 | Look at the provided example for more details.
To ensure the keyboard navigation works properly, remember to set the :option-height so it equals
8 | the height of the option template. By default, the component assumes an option height of 40px.
:option-height="104" – The height of the custom option template.To allow multiple selections pass the :multiple="true" prop.
:close-on-select="false" – the dropdown stays open after selecting an option:clear-on-select="false" – the search query stays the same after selecting an option<template v-slot:tag="props"><Your
9 | code></template> to use a different markup for selected options (tags)
10 | The options list can also contain groups. It requires passing 3 additional props: group-label,
4 | group-values and group-select. group-label is used to locate the group
5 | label. group-values should point to the group’s option list. group-select is used to
6 | define if selecting the group label should select/unselect all values in the group, or do nothing.
Despite that the available options are grouped, the selected options are stored as a flat array of objects.
8 |Please look at the provided example for a example options list structure.
9 |In some cases, you might to programmatically open and close your multiselect. 4 | There are various ways you can do this:
5 |activate() and deactivate() – You can access these methods on the multiselect.
7 | focus() – You can dispatch a focus event on the multiselects $el or on the search
9 | input directly.
10 | By default searchable is set to true, thus using search doesn’t require any prop.
The internal search engine is based on the label prop. In other words – when searching,
5 | vue-multiselect only compares the option labels with the current search query. If you want to search inside other
6 | object properties look at the ajax search example.
custom-label accepts a function with the option object as the first param. It should
8 | return a string which is then used to display a custom label.
When sorting a filtered list, filteringSortFunc accepts a function for use in Array.sort().
10 | By default, it orders by the ascending length of each option.
When working with objects, you must provide additional props: label and track-by.
track-by is used to identify the option within the options list thus it’s value has to be unique. In
6 | this example the name property is unique across all options, so it can be used as
7 | track-by value.
label is used to display the option.
:searchable="false" – disables the search functionality:allow-empty="false" – once there is a value it can’t be deselecteddeselect-label="Can't remove this value" – when highlighted, the already selected option will
13 | have the Can't remove this value helper label. Useful for single selects that don’t allow empty
14 | selection.
15 | The basic single select / dropdown doesn’t require much configuration.
5 |The options prop must be an Array.
:searchable="false" – disables the search functionality:close-on-select="false" – the dropdown stays open after selecting an option:show-labels="false" – the highlighted option doesn’t have a label on itDue to the one-way data-flow enforced by Vuex you should not be using v-model for manipulating the
4 | currently selected value.
5 | Because Vue-Multiselect always uses it’s own internal copy of the value it never mutates the
6 | :modelValue
7 | by itself, which means it can can safely used with Vuex or even Redux.
In Vue 3.0 v-model is just a syntax sugar for :modelValue and
9 | @update:modelValue. Because
10 | of this we can use the @update:modelValue event to trigger Vuex actions or mutations. Whenever we
11 | mutate the
12 | :modelValue in Vuex, Multiselect’s internal value will update.