Vue Virtual Picklist

It is a picklist that virtualizes its options to avoid mounting all of them in the DOM. Options are swaped depending on the position of the scrollbar.

Here you can find the documentation which has lots of examples.

Props

Prop name	Description	Type	Values	Default
caseInsensitive	If enabled, the search is Case Insensitive.	boolean	-	false
disabled	if enabled, the picklist is disabled.	boolean	-	false
enableSearch	If enabled, an input is rendered and the user can type on it.	boolean	-	false
hideSelected	If enabled, the selected option is removed from the available options.	boolean	-	false
noOptionsAvailableText	It is the text shown when the search returns no options.	string	-	"no options found"
optionHeight	It determines the Height of each option. It is not necessary to set it. It is used by vue-virtualized-list to control the virtualization.	number	-	30
options	These are the options available to be selected. Each object in the array must have the "value" and "label" keys. These objects can also have other keys, which will also be emited by the input and select events.	array	-
placeholder	It is the placeholder for when there are options to select but none were picked.	string	-	"select an option"
searchInputPlaceholder	It is the placeholder for the search input. It has to be combined with the enable-search property.	string	-	"type to filter available options"
searchKey	It is the key used to filter the objects you passed on options property. It defaults to value, but you can choose other key from the objects you passed.	string	-	"value"
value	Stores the object which is used to determine the selected option. This object must be in the following format: { "value" : "a", "label" : "a", "index": 0 }	object	-
visibleOptions	It controls the number of visible options.	number	-	5

Events

Event name	Properties	Description
show-options		dispatched when options are hidden.
select	option object - object containing value, label, index, and originalListIndex	dispatched after selecting an option. This can be used when you use value, instead of v-model.
input	option object - object containing value, label, index, and originalListIndex	dispatched after selecting an option. This is used for v-model.

Slots

Name	Description	Bindings
selected-option	used to control how the selected option is rendered.	option object - it contains value, label, index, and originalListIndex
placeholder	used to control how the picklist's placeholder is rendered.
dropdown-icon	used to override the dropdown icon. It can be any image and you can style it on the parent component.
option	used to control how each option from the list of options is rendered.	option object - it is an object containing value, label, index, and originalListIndex
no-options	used to control how the message when the filter returns 0 results is displayed.	text string - it has the value you passed on the noOptionsAvailableText property

---