Modulist Vue

Select development

The custom select and it's states.

Example

Select option
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Option 11
Option 12
Option 13
Option 14
Option 15
Option 16
Option 17
Option 18
Option 19
Selected option: {}
<!--single select-->
<v-select
  name="single-select" 
  v-model="select1" 
  label="Select"
  placeholder="Select option" 
  :options="options" 
/>
1
2
3
4
5
6
7
8
Select options
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Option 11
Option 12
Option 13
Option 14
Option 15
Option 16
Option 17
Option 18
Option 19
Selected option: []
<!--multiple select-->
<v-select 
  name="multiple-select" 
  v-model="select2" 
  multiple 
  label="Multiple select"
  placeholder="Select options" 
  :options="options" 
/>
1
2
3
4
5
6
7
8
9
Select option
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Option 11
Option 12
Option 13
Option 14
Option 15
Option 16
Option 17
Option 18
Option 19
Selected option: {}
<!--filterable select-->
<v-select 
  name="filterable-select" 
  v-model="select3"
  label="Filterable select"
  placeholder="Select option"
  filterable
  :options="options" 
/>
1
2
3
4
5
6
7
8
9
Select option
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Option 11
Option 12
Option 13
Option 14
Option 15
Option 16
Option 17
Option 18
Option 19
Selected option: {}
<!--clearable select-->
<v-select 
  name="clearable-select" 
  v-model="select4"
  label="Filterable select"
  placeholder="Select option"
  clearable
  multiple
  :options="options" 
/>
1
2
3
4
5
6
7
8
9
10
Select option
Option 1
id: 1 value: 1
Option 2
id: 2 value: 2
Option 3
id: 3 value: 3
Option 4
id: 4 value: 4
Option 5
id: 5 value: 5
Option 6
id: 6 value: 6
Option 7
id: 7 value: 7
Option 8
id: 8 value: 8
Option 9
id: 9 value: 9
Option 10
id: 10 value: 10
Option 11
id: 11 value: 11
Option 12
id: 12 value: 12
Option 13
id: 13 value: 13
Option 14
id: 14 value: 14
Option 15
id: 15 value: 15
Option 16
id: 16 value: 16
Option 17
id: 17 value: 17
Option 18
id: 18 value: 18
Option 19
id: 19 value: 19
Selected option: {}
<!--custom option template-->
<v-select 
  name="custom-option-select" 
  v-model="select5"
  label="Custom option select"
  placeholder="Select option"
  :options="options" 
>
  <div class="" slot-scope="props" slot="option">
    <div class="text-bold">{{ props.option.label }}</div>
    <div class="text-emphasized f5">id: {{ props.option.id }} value: {{ props.option.id }}</div>
  </div>
</v-select>
1
2
3
4
5
6
7
8
9
10
11
12
13

Props

Name Type Description Default Required
id [String, Number] Unique identifier None false
name String Select name None false
label String Select label 'Label' false
tabindex [String, Number] Select tabindex None false
value, v-model [Array, Object] The model that the select value syncs to. If you are not using v-model, you should listen for the input event and update value. None true
placeholder String Select placeholder 'Placeholder' false
showLabel Boolean Show label or not false false
multiple Boolean Allows to select multiple options false false
filterable Boolean Allows to filter options false false
clearable Boolean Allows to clear selected option false false
loading Boolean Indicates loading state false false
options Array List of options [] true
keys Object Allows for redefining each option object's keys {label: 'label',value: 'value',image: 'image',disabled: 'disabled'} false

Events

Name Description
@input Emitted when the select value is changed. The handler is called with the new value
@change Emitted when the select value changes
@select Emitted when the select value was selected. The handler is called with the selected option
@clear Emitted when the select value was cleared
@focus Emitted when the select value was focused
@blur Emitted when the select value was blurred

Methods

Name Description
reset() Call this method to reset the select value

Slots

Name Description
option This slot can be used to render a custom template for each option in select

← Spinner →