Vue Multi Select

Vue.js component for Select2 plugin

Requirements

• jQuery ^3.5.1
• Vue ^2.5.9
• Select2 ~4.0

Installation

With npm

npm install --save @fara0n/vue-multi-select

How to use

First import VueMultiSelect from "@fara0n/vue-multi-select"

<script>
    import VueMultiSelect from "@fara0n/vue-multi-select";
    
    export default {
      name: 'App',
      components: { VueMultiSelect }
    }
</script>

Then pass a list of options to the :list property like so

<template>
    <div>
        <VueMultiSelect
            :list="list"
        ></VueMultiSelect>
    </div>
</template>

vue-multi-select will render your list of Array options

<option
    v-for="(item, index) in list"
    :key="index"
    :value="item"
>
    {{ item }}
</option>

You may also want to provide :selector property as a String to be able to pass it back with $emit event

<template>
    <div>
        <VueMultiSelect
            :list="list"
            :selector="`sizes`"
            :key="`sizes`"
            v-model="values"
            @select="setSizes"
        ></VueMultiSelect>
        
        <p>Values: {{ values }} </p>
    </div>
</template>

<script>
    import VueMultiSelect from "@fara0n/vue-multi-select";
    
    export default {
        name: 'App',
        data() {
            return {
                list: ['S', 'M', 'L', 'XL'],
                values: ['S', 'XL']
            }
        },
        components: {
            VueMultiSelect
        },
        methods: {
            setSizes(selector, value) {
                this.values = value;
            }
        }
    }
</script>

Available props

| Attribute | Type | Default | Required? | Description | | :--- | :---: | :---: | :---: | :--- | | v-model | Array / null | [] | false | Set multi select value | | list | Array / null | [] | true | Array that will render list of options | | selector | String | `` | false | String property being passed back with @select event | | key | String | false | false | Optional / use to differentiate between other selects | | @select | Function | false | false | event that fires when option is selected |