@moodles/vue-selectbox

A useful selectbox component for vue.js

Installation

webpack

npm i --save @moodles/vue-selectbox

browser

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

<script src="js/vue.js"></script>
<script src="js/vue-selectbox.js"></script>

Initialization

webpack

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

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

browser

<script src="js/vue.js"></script>
<script src="js/vue-selectbox.js"></script>

<script>
    Vue.use(VueSelectBox);

    var app = new Vue({
        el: '#app',
    });
</script>

Component usage

When just using the component without any props, it will just show a default list of items.

<select-box></select-box>

The available props are:

| Prop | Type | Default | Description | | --------- | ------ | ---------------------------------------------- | ----------------------------- | | title | String | Title | Title above the component | | data | Array | [ { id: 1, email: [email protected] }, ... ] | 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
<select-box
    title="Employees"
    label-key="name"
    value-key="id"
    input-name="employees"
    :data="employees"
    :checked="checkedEmployees"
></select-box>
...