Table of contents

• General
• Setup
• Usage
• Object options
• Props
• Slots
• Patch notes

General

Simple select vue component, that allows you to control selected options from array

component is created with:

• Vue 2.6.10

Setup

install module locally with npm or yarn

npm i @pbartkowicz/vueselect

or

yarn add @pbartkowicz/vueselect

Usage

Import

import vueselect from '@pbartkowicz/vueselect'

Register in components section

components:{
    vueselect,
},

Define array with select options

data(){

    return{

        yourArrayWithOptions:[
            'option1',
            'option2',
            'option3'
        ],

        output: '',

    }

}

Use component in your code

<vueselect :options="yourArrayWithOptions" v-model="output"/>

You can always define array with objects

data(){

    return{

        yourArrayWithOptions:[
            {id: 1, name: 'option1'},
            {id: 2, name: 'option2'},
            {id: 3, name: 'option3'}
        ],

        output: '',

    }

}

And then use label prop for displayed value in select, and reduce prop for key in object for select output

<vueselect :options="yourArrayWithOptions" label="name" reduce="id" v-model="output"/>

For option named 'option2' output will be '2'

Object options

When you will define array with objects, you can pass in to objects two options:

Option	Type	Default	Required	Description
class	String		No	Name of class for option.
hide	Boolean		No	Option to hide item.

data(){

    return{

        yourArrayWithOptions:[
            {id: 1, name: 'option1', class: 'your-class-for-option'},
            {id: 2, name: 'option2', hide: true},
            {id: 3, name: 'option3'}
        ],

        output: '',

    }

}

In this case 'option1' will have class "your-class-for-option" and 'option2' will not be displayed

Props

Prop	Type	Default	Required	Description
options	Array		No	Array with select options.
label	String		No	Displayed value in select for array with objects.
reduce	String		No	Select key in object for vueselect component output.
searchable	Boolean	false	No	Enable search in options
clearable	Boolean	false	No	Enable clear possibility
multiselect	Boolean	false	No	Enable multiselect - output changes to array
customClasses	Object		No	Allows to add custom classes to elements. Use as keys in object: selected, search, clearIcon, dropdownIcon, dropdown, checkbox

Slots

Slot	Description
noOptions	Default value "no options".
icon	Slot for icon.
clear-icon	Slot for clear icon.

Example:

<vueselect :options="yourArrayWithOptions" label="name" reduce="id" v-model="output">
    <template v-slot:noOptions>
        No avaible options
    </template>
<vueselect/>

Patch notes

1.2.1

• Changed keywords for npm

1.2.0

• Added multiselect
• Added clear button
• Added custom classes for elements
• Added slot for clear icon

1.1.0

• Added search possibility
• Dynamic position of dropdown depending on the avaible space
• Dynamic tooltip
• Added slot for icon