Vue Selectify

Vue component for HTML select

To globally register vue-selectify just import register.js.

import "register.js"

Or to register locally

import VueSelectify from "./vue-selectify.vue"

new Vue({
    // Other options
    components: {
        // <vue-selectify> will only be available in parent's template
        'vue-selectify': VueSelectify
      }
});

##Properties You can use the following properties to customise vue-selectify

1. label

label must be present denoting the label of the vue-selectify.

<vue-selectify label="Year"></vue-selectify>

This will generate

<div class="">
    <label class="" for="year">Year</label> 
    <div class="">
        <select class="" id="year" name="year"></select>
    </div>
</div>

2. list

This is the list of options; a mandatory field.

<vue-select label="Year" :list="list"></vue-select>

new Vue({
    // Other options
    data: {
        list: [
            {
                id: 1,
                year: 'a'
            },
            {
                id: 2,
                year: 'b'
            },
            {
                id: 3,
                year: 'c'
            }
        ]
      }
});

This will render

<div class="">
    <label for="year" class="">Year</label> 
    <div class="">
        <select id="year" name="year" class="">
            <option value="1">a</option>
            <option value="2">b</option>
            <option value="3">c</option>
        </select>
    </div>
</div>

By default, of each item of list, id property will be used for value of option and snake_case of label will be used as text of option.

3. list-id

list-id is the value property of each of option in select element. if not specified, id will be used as default value.

<vue-select label="Year" :list="list" list-id="index"></vue-select>

new Vue({
    // Other options
    data: {
        list: [
            {
                index: 1,
                year: 'a'
            },
            {
                index: 2,
                year: 'b'
            },
            {
                index: 3,
                year: 'c'
            }
        ],
        model: 2,
    }
})

This will be rendered as

<div class="">
    <label for="year" class="">Year</label> 
    <div class="">
        <select id="year" name="year" class="">
            <option value="1">a</option>
            <option value="2">b</option>
            <option value="3">c</option>
        </select>
    </div>
</div>

Default value of list-id is 'id'.

4. list-item

list-item is the inner text of each of option in select element. if not specified, snake_case of label will be used as default value.

<vue-select label="Year" :list="list" list-id="index" list-item="value"></vue-select>

new Vue({
    // Other options
    data: {
        list: [
            {
                index: 1,
                value: 'a'
            },
            {
                index: 2,
                value: 'b'
            },
            {
                index: 3,
                value: 'c'
            }
        ],
        model: 2,
    }
})

This will be rendered as

<div class="">
    <label for="year" class="">Year</label> 
    <div class="">
        <select id="year" name="year" class="">
            <option value="1">a</option>
            <option value="2">b</option>
            <option value="3">c</option>
        </select>
    </div>
</div>

5. name

name is a optional property denoting the name of the select element.

<vue-selectify label="Year" name="year"></vue-selectify>

This will generate

<div class="">
    <label class="" for="year">Year</label>
    <div class="">
        <select class="" id="year" name="year"></select>
    </div>
</div>

If absent, name will be the kebab-case version of label as you see in preceding example.

6. id

id is a optional property denoting the id of the select element.

<vue-select label="Year" id="year-id"></vue-select>

This will generate

<div class="">
    <label for="year-id" class="">Year</label> 
    <div class="">
        <select id="year-id" name="year" class=""></select>
    </div>
</div>

If absent, id will be same as the name.

7. multiple

As you guess, this denote if the select can have multiple selected options or not.

8. css

Currently only 'bootstrap' is supported value of css property. If set, vue-selectify will use Bootstrap like styling.

<vue-select label="Year" css="bootstrap"></vue-select>

This will be rendered as

<div class="form-group">
    <label for="year" class="control-label col-sm-4">Year</label> 
    <div class="col-sm-8">
        <select id="year" name="year" class="form-control"></select>
    </div>
</div>

You should wrap vue-selectify with <div class="form-horizontal"></div> while using bootstrap style.

v-model

Requires version >= 2.2.0

If you're using version >2.2.0, then you can use v-model. Just as following

<vue-select label="Year" :list="[]" v-model="year"></vue-select>

selected-value property and change event

If you're using version below 2.2.0, then you need to use selected-value property to initially set the selected value. Later, if the selected value changes, a change event will be emitted. The only parameter is the new value.

<vue-select label="Year" :list="[]" 
    selected-value="2" @change="(val) => {selectedYear = val}"></vue-select>

You can also set any event handler method to @change event.