To globally register vue-selectify just import register.js.
npm install vue-selectifyjs
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
`
$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
`
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
`
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
`
$3
name is a optional property denoting the name of the select element.
`html
`
This will generate
`html
`
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
`
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
`
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.