vue-select is a Vue.js component to create dynamic, customizable, advanced dropdown select just like the select2 and chosen libraries.
Main features:
- Supports both single and multiple selections.
- AJAX data fetching.
- Data filtering.
How to use it:
1. Install & import.
import '@desislavsd/vue-select/dist/vue-select.css' import VueSelect from '@desislavsd/vue-select'
2. Register the component.
Vue.use(VueSelect, {
/* options */
})
// or
export default {
components: { vSelect }
}
3. Create a vue-select component and define the option data as follows:
<v-select v-model="name" :from="['vue', 'script']" />
<v-select v-model="name" as="name" :from="[{name: 'vue', id: 1}, {name: 'script', id: 2}]" tagging :tag-keys="[9, 32, 188]" />
<v-select v-model="name" as="name:id" from="/data?q=%s" />
4. All available props.
/**
* Make use of v-model
*/
value: { },
query: String,
/**
* Options for the dropdown. Sould be one of:
*
* Array: Array of select options
* Function: Function that returns an array of options or promise that resolves to an array of options
* String: Url that will be passed to the fetch function
* Object: Config object to be passed to the fetch function.
*/
from: {
type: [ Array, Function, String, Object ],
default(){ return [] }
},
/**
* Option descriptor in the format 'label:value:index'
*
* label: Path to option property that will be the label. It is used for filtering as well.
* If options are objects this field is required.
*
* value: Path to option proprty that will be used as value of the option.
* If ommited the whole option is used.
*
* index: Path to unique property of the option used for comparison.
* If ommited falls back to value.
*/
as: [String, Array],
/**
* Parses the response from the server.
* Should return the array of options.
*/
parse: {
type: [Function, String],
default: me
},
fetch: {
type: Function,
default: async function(q, cfg){
let url = cfg.url || cfg;
return await fetchAdapter(url.replace('%s', encodeURIComponent(q)))
},
},
filter: {
type: [Boolean, Function],
default: undefined
},
filterBy: {
type: Function,
default( { label }, q ){
return ~(label + '').toLowerCase().indexOf(q.toLowerCase())
}
},
/**
* Debounce in ms for the search function
*/
debounce: { type: Number, default: 250 },
tagging: { type: [Boolean, Function] },
multiple: { type: Boolean, default: undefined },
dynamic: { type: Boolean, default: undefined },
tags: {}, /* readonly */
tagKeys: {type: Array, default: () => [] },
validate: {
type: Function,
default(q){
let { $attrs } = this;
return ( q || !$attrs.hasOwnProperty('minlength') ) && elMatches(this.$refs.inp, ':valid')
}
},
watchAttrs: {default(){ return ['required', 'disabled', 'readonly']}},
5. Event handlers.
- @select: when an option is selected
- @create: when a new option is created on attempt for tagging
- @input: When updating model value
- @focus: on focus
- @blur: on blur
Preview:
Changelog:
v0.5.2 (03/28/2021)
- Bugfix
v0.5.1 (03/24/2021)
- Bugfix
Download Details:
Author: desislavsd
Live Demo: https://jsfiddle.net/desislavsd/es2n6py0/
Download Link: https://github.com/desislavsd/vue-select/archive/master.zip
Official Website: https://github.com/desislavsd/vue-select
Install & Download:
# NPM
$ npm install @desislavsd/vue-select --save