vue-dynamic-select

A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

View Online Demos Here

Installation

npm install vue-dynamic-select --save

Import

import DynamicSelect from 'vue-dynamic-select'
 
Vue.use(DynamicSelect)

Usage

// Static options source (array)
<dynamic-select 
    :options="objectArray"
    option-value="id"
    option-text="name"
    placeholder="type to search"
    v-model="selectedObject" />
 
// Dynamic options source (ajax, etc)
<dynamic-select 
    :options="objectArray"
    @search="onSearchEventHandler"
    option-value="id"
    option-text="name"
    placeholder="type to search"
    v-model="selectedObject" />

NOTE: For more detailed usage see the examples folder.

Properties

Name	Type	Default	Description
options	Array	[ ]	Array of objects that will create the select list options
option-value	String	id	The object property used for the value of the select options
option-text	String	name	The object property used for the display text of the select options
v-model	Object	null	Object containing the the selected object
placeholder	String	search	String containing the text to be used as a placeholder

Events

Name	Description
search	Triggered whenever search text changes. Value is the current search string.
input	Triggered whenever an option is selected.