vue-selectize

A Selectize wrapper for Vue.js 2.

Dependencies

• jQuery >= 1.7.0

Installation

npm install --save jquery @idecardo/vue-selectize

Usage

import Selectize from '@idecardo/vue-selectize'

export default {
    components: {
        Selectize,
    },

    data: () => ({
        options: [
            { value: 1, text: 'One'   },
            { value: 2, text: 'Two'   },
            { value: 3, text: 'Three' },
            { value: 4, text: 'Four'  },
            { value: 5, text: 'Five'  },
        ],

        selected: [],

        settings: {
            maxItems: 3,
            plugins: ['remove_button'],
        },
    }),
}

Basic

<selectize v-model="selected">
    <option v-for="option in options" :value="option.value">
        {{ option.text }}
    </option>
</selectize>

<!-- Or using shorthand -->

<selectize :options="options" v-model="selected"></selectize>

Settings

<selectize :options="options" :settings="settings" v-model="selected"></selectize>

<!-- Or using data attributes -->

<selectize :options="options" v-model="selected" data-max-items="3"></selectize>

Theme

// Include your preferred theme in your main SASS file or your component's <style lang="scss"/> section.

@import "~selectize/dist/css/selectize.default.css";