Searchable select Component name: <v-searchable-select>
Examples Basic Basic API Name Type Description Default options Array The options available for selection. Can be an array of strings or objects. - value Object|String The value of the selected option. - placeholder String Placeholder text shown when input field is empty. - @select Event Event triggered when a selection has been made. The selected value can be found in the $event object. - description String Helper text - error String Error message - invalid Boolean Wether or not the field is invalid. Shows error message if invalid. false small Boolean Wether or not the field is smaller. false gray Boolean Wether or not the field has a gray background. false slot:custom-no-results Slot Slot used to show a custom message, when no results are found. -
Basic example fetching data from a json file (Great for debugging production data)
Object options Object options API Name Type Description Default option-id String When options is an array of objects, option-id names the object property used to identify individual options. The property must thus be unique across all options. - label String When options is an array of objects, label names the object property used to display the option. -
The multiple select works the same way as the other examples - with the exception that :value and @input should be done as in the example below. We use these values to monitor the selected options, and reset the select if all selected tags are removed.
Name Type Description Default multiple Boolean Required to make the select multiselect false
Name Type Description Default meta-label String Names the object property used to display the meta label. -
Grouped options Grouped options API Name Type Description Default group-values String When options contains groups of options, group-values names the object property holding the options of a group. - group-label String When options contains groups of options, group-label names the object property used to display the group label. -
Async options based on search query Async options API Name Type Description Default url String Set this property to load options asynchronously based on the user's search query. The supplied url must contain a {query} placeholder. - min-chars Number The minimum number of search query characters required before searching takes place. 2
Looking for further customization? | This component uses the vue-multiselect(opens new window) component.