A useful selectbox component for vue.js
npm install @moodles/vue-selectboxA useful selectbox component for vue.js
###### webpacknpm i --save @moodles/vue-selectbox
###### browser
Grab vue-selectbox.js from dist folder and include it using a regular script tag
```
###### webpack
`
import { SelectBox } from '@moodles/vue-selectbox';
const app = new Vue({
el: '#app',
components: {
'select-box': SelectBox
}
})
`
###### browser
`
`
, it will just show a default list of items.`
`The available
props are:| Prop | Type | Default | Description |
| --------- | ------ | ---------------------------------------------- | ----------------------------- |
| title | String |
Title | Title above the component |
| data | Array | [ { id: 1, email: email@example.com }, ... ] | Dataset used in the component |
| checked | Array | [] | Array of prechecked values |
| labelKey | String | email | Key of property in data of which label you want to show per item |
| valueKey | String | id | Key of property in data of which you want to use as the value per item |
| inputName | String | data | Name which is used as the name attribute on the checkboxes |
###### Example of prop usage
`
//some-vue-or-js-file
...
data() {
return {
employees: [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Lance Bogrol' },
{ id: 3, name: 'Will Barrow' },
{ id: 4, name: 'Hanson Deck' },
{ id: 5, name: 'Desmond Eagle' },
],
checkedEmployees: [2, 4, 5]
}
}
......
//some-html-file
title="Employees"
label-key="name"
value-key="id"
input-name="employees"
:data="employees"
:checked="checkedEmployees"
>
...
``