mul14
8/23/2017 - 11:34 AM

index.html

Vue.component('select2', {
    props: ['options', 'value', 'multiple', 'placeholder'],
    template: `
        <select ref="select" :multiple="multiple" :data-placeholder="placeholder">
            <slot></slot>
        </select>
    `,
    mounted: function () {
        var vm = this;
        $(this.$refs.select)
            .select2({ data: this.options })
            .on('change', function (ev, args) {
                if (!(args && "ignore" in args)) {
                    vm.$emit('input', $(this).val())
                }
            });
            
        Vue.nextTick(() => {
            $(this.$refs.select)
                .val(this.value)
                .trigger('change', { ignore: true })
        });
    },
    watch: {
        value: function (value, oldValue) {
            // update value
            $(this.$refs.select)
                .val(this.value)
                .trigger('change', { ignore: true });
        },
        options: function (options) {
            // update options
            $(this.$refs.select).select2({ data: options })
        }
    },
    destroyed: function () {
        $(this.$refs.select).off().select2('destroy')
    }
});
<select2
  v-model="something"
  :options="[{ id: 1, text: '', selected: true }]"
  multiple
  placeholder
></select2>