vue-dynamic-select is a VueJS plugin that provides a searchable and reactive select list component with no dependencies.
vue js dynamic select options, vue 3 select example, vue update select options, vue dependent dropdown, dynamic dropdown in vuejs, vuejs select list item, vue 3 selected option
How to make use of it:
Installation
npm install vue-dynamic-select --save
Usage
import DynamicSelect from 'vue-dynamic-select' Vue.use(DynamicSelect)
// 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" />Properties
| Name | Type | Default | Description |
|---|---|---|---|
| options | Array | [ ] | An 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 | An object containing the selected object |
| placeholder | String | search | A 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. |
dynamic select box component for vue js, vue-dynamic-select Plugin/Github
See Demo And Download
Official Website(silasmontgomery): Click Here
This superior jQuery/javascript plugin is developed by silasmontgomery. For extra advanced usage, please go to the official website.
