Dropdown Select

GITHUB

To create full featured select (dropdown) element use this component.


Code:

  
HTML
<fvSelect v-model="input" :options="options" />
  
Javascript
export default { data () { return { input: undefined, options: [ { text: 'Item One', value: 1 }, { text: 'Item Two', value: 2 }, { text: 'Item Three', value: 3, disabled: true } ] } } }

Examples:

Default

Custom Template

Multiple

Allow Insert

Enter Github repo name

XLarge size
Large size
Medium size
Small size
XSmall size

Disabled

Required

Notes:

  • The display css prop of input is inline-flex, so do not change it to block or ... for custom styles.

API:

NameTypeDefaultDescription
value*
---
---
Value of input
required
Boolean or Function
false
Does input required to fill? Also with function type you can pass function with one argument (fn(value){}) and return Boolean value.
disabled
Boolean
false
Does input disabled?
placeholder
String
''
Placeholder text. (when no option selected)
multiple
Boolean
false
Allow user to select multiple options.
options
Array
[]
List of options.
disabledKey
String
'disabled'
disabled key in each option object. only works when options prop is list of objects.
valueKey
String
'value'
value key in each option object. only works when options prop is list of objects.
textKey
String
'text'
text key in each option object. only works when options prop is list of objects.
deleteButton
Boolean
true
Show delete button next to selected values.
loading
Boolean
false
Show loading indicator instead of options.
allowInsert
Boolean
false
Allow user to insert new option.
search
true or false or null
true
Allow user to search in options. false make it disabled, true handled by internal local search and null just show search input, but not affect to options.
NameParamsDescription
input
newValue
Fired when component request to change value.
insert
text
Fired when user try to insert new value.
search
text
Fired when user typed into search input.
NameParamsDescription
option
option
Template for options inside outer box.
value
value
Template for value inside input.
insert
value
Template for insert new item box inside outer box.
empty
userTypedValue
Template for empty outer box.
NameDescription
.fv-size-xs
XSmall size
.fv-size-sm
Small size
.fv-size-md
Medium size (actived by default)
.fv-size-lg
Large size
.fv-size-xl
XLarge size