Vue Selectify
Vue component for HTML select
To globally register vue-selectify just import register.js.
Or to register locally
// Other options components: // <vue-selectify> will only be available in parent's template 'vue-selectify': VueSelectify ;
Properties
You can use the following properties to customise vue-selectify
1. label
label
must be present denoting the label of the vue-selectify
.
This will generate
Year
2. list
This is the list of options; a mandatory field.
// Other options data: list: id: 1 year: 'a' id: 2 year: 'b' id: 3 year: 'c' ;
This will render
Year a b c
By default, of each item of list
, id
property will be used for value of option
and snake_case
of label
will be used as text of option.
3. list-id
list-id
is the value property of each of option in select element. if not specified, id
will be used as default value.
// Other options data: list: index: 1 year: 'a' index: 2 year: 'b' index: 3 year: 'c' model: 2
This will be rendered as
Year a b c
Default value of list-id
is 'id'
.
4. list-item
list-item
is the inner text of each of option in select element. if not specified, snake_case
of label
will be used as default value.
// Other options data: list: index: 1 value: 'a' index: 2 value: 'b' index: 3 value: 'c' model: 2
This will be rendered as
Year a b c
5. name
name
is a optional property denoting the name of the select
element.
This will generate
Year
If absent, name
will be the kebab-case
version of label
as you see in preceding example.
6. id
id
is a optional property denoting the id of the select
element.
This will generate
Year
If absent, id
will be same as the name
.
7. multiple
As you guess, this denote if the select can have multiple selected options or not.
8. css
Currently only 'bootstrap'
is supported value of css
property. If set, vue-selectify
will use Bootstrap like styling.
This will be rendered as
Year
You should wrap vue-selectify
with <div class="form-horizontal"></div>
while using bootstrap style.
v-model
Requires version >= 2.2.0
If you're using version >2.2.0, then you can use v-model
. Just as following
selected-value
property and change
event
If you're using version below 2.2.0, then you need to use selected-value
property to initially set the selected value. Later, if the selected value changes, a change
event will be emitted. The only parameter is the new value.
You can also set any event handler method to @change
event.