Vue Selectify

$3

To globally register vue-selectify just import register.js.

``js
import "register.js"
`

Or to register locally

`js
import VueSelectify from "./vue-selectify.vue"

new Vue({
// Other options
components: {
// will only be available in parent's template
'vue-selectify': VueSelectify
}
});
`

##Properties
You can use the following properties to customise vue-selectify

$3

label must be present denoting the label of the vue-selectify.

`html

`

This will generate

`html

Year

`

$3

This is the list of options; a mandatory field.

`html

`
`javascript
new Vue({
// Other options
data: {
list: [
{
id: 1,
year: 'a'
},
{
id: 2,
year: 'b'
},
{
id: 3,
year: 'c'
}
]
}
});
`
This will render

`html

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 is the value property of each of option in select element. if not specified, id will be used as default value.

`html

`
`javascript
new Vue({
// Other options
data: {
list: [
{
index: 1,
year: 'a'
},
{
index: 2,
year: 'b'
},
{
index: 3,
year: 'c'
}
],
model: 2,
}
})
`
This will be rendered as

`html

Year

a
b
c

`

Default value of list-id is 'id'.

$3

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.

`html

`
`javascript
new Vue({
// Other options
data: {
list: [
{
index: 1,
value: 'a'
},
{
index: 2,
value: 'b'
},
{
index: 3,
value: 'c'
}
],
model: 2,
}
})
`
This will be rendered as

`html

Year

a
b
c

`

$3

name is a optional property denoting the name of the select element.
`html

`
This will generate

`html

Year

`

If absent, name will be the kebab-case version of label as you see in preceding example.

$3

id is a optional property denoting the id of the select element.
`html

`

This will generate
`html

Year

`
If absent, id will be same as the name.

$3

As you guess, this denote if the select can have multiple selected options or not.

$3

Currently only 'bootstrap' is supported value of css property. If set, vue-selectify will use Bootstrap like styling.

`html

`

This will be rendered as

`html

Year

`
You should wrap vue-selectify with

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
`html

`



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.

`html
selected-value="2" @change="(val) => {selectedYear = val}">
`

You can also set any event handler method to @change` event.