@moodles/vue-selectbox

A useful selectbox component for vue.js

$3

###### webpack
npm i --save @moodles/vue-selectbox

###### browser
Grab vue-selectbox.js from dist folder and include it using a regular script tag

``


`

$3

###### webpack

`
import { SelectBox } from '@moodles/vue-selectbox';

const app = new Vue({
el: '#app',
components: {
'select-box': SelectBox
}
})
`

###### browser
`




`

$3


When just using the component without any props, 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"
>
...
``