Vue Double Select Component
A MultiSelect with two lists for Vue.js, searchable, sorting and action buttons.
Demo
See demo.
Install via npm
npm install vue-double-Import and use
Import for global usage
Vue...Or on a single component
...}components: DoubleSelect ...Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | Array | Array of items to select | |
| selectedItems | Array | Array of selected items | |
| valueField | String | value | Value field |
| textField | String | text | Text field |
| searchable | Boolean | false | If enabled, it will display search fields for lists. |
| searchablePlaceholder | String | Search | Placeholder of inputs search |
| sorteable | Boolean | false | Sort array by property name |
| orderBy | String | id | Property name to sort |
| textItems | String | items | Counter text that is below the left list |
| textSelectedItems | Object | {one: 'selected item', greaterThanOne: 'selected items'} | Counter text that is below the right list |
| limitSelectedItems | Number | 999 | Limit items that the user can select |
| disabled | Boolean | false | Disable select |
Events
| Name | Description |
|---|---|
| itemAdded | When an item has been added to the list |
| itemRemoved | When an item has been removed from the list |
| selectedListModified | When the selected list has been modified |
How to use
After you have installed the package and imported it, call the component's html and pass its properties.
Contributing
To contribute to this project you can clone the repository and run the npm run dev command to test.
npm install npm run dev npm publish