How to bind the value from select in VueJS with select2

It is because select2 hides the actual select element and provides a different UI to manipulate the input. so you need to sync changes yourself.

There is an official example here:

https://vuejs.org/v2/examples/select2.html

which wraps the select2 behavior in a reusable component.

I have created a new component:

<template>
        <div>
                <select ref='select'>
                        <slot></slot>
                </select>
        </div>
</template>

<script>
    export default {
        props: ['options', 'value'],

        mounted: function () {
            var vm = this;
            $(this.$refs.select)
                .select2({
                    data: this.options,
                    tags: true,
                    createTag: function (params) {
                        return {
                            id: params.term,
                            text: params.term,
                            newOption: true
                        }
                    },
                    templateResult: function (data) {
                        var $result = $("<span></span>");
                        $result.text(data.text);
                        if (data.newOption) {
                            $result.append(" <em>(new)</em>");
                        }
                        return $result;
                    }
                })
                .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')
        }
    }

</script>

<style>
    .select2-container--default {
        min-width: 300px;
        max-width: 500px;
    }
</style>

And I am calling it in the parent.

My question is where am I listening for the event? here I am firing an event but if I am listening for it in the parent this event will fire all the parent listeners.

I have a page with 5 selects. So I am rendering them all in the page and then they all are having the same listener and when one of the select fires that it holds a value all of them are trggired. So if I select in the first one the first value then all the select would have the same value.

How can I properly need to listen for the event that I am firing in the component.

Thanks

I'm not sure what do you mean by listener you only have to add v-model and bind them to whatever you need.

Here is a page with 3 selects:

https://jsfiddle.net/logaretm/u0om9zz6/

Because the component is firing an input event, v-model automatically detects it and updates the binding value.

https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

@logaretm , how to set select2 contains data from controller? i try using mounted

mounted(){ /$('select').select2();/ this.csrf = window.laravel.csrfToken; const url = /getkategori; axios.get(url).then(response => { this.kategoris = response.data; }); },

my select2 no contains data

this my code https://pastebin.com/ZCVXEJAc

Hi, I am using select2 component from here https://vuejs.org/v2/examples/select2.html but I am having one issue, it's not taking the value of tags: false, the tags attribute is always true even I have hard-coded it to false.

Please check my code below.

Vue.component('select2', { props: ['options', 'value','tags'], template: <select> <slot></slot> </select>,

mounted: function () { var vm = this

$(this.$el)
  // init select2
  .select2({ data: this.options, tags:false })
  .val(this.value)
 
  .trigger('change')
  // emit event on change.
  .on('change', function () {
    vm.$emit('input', this.value)
  })

}, watch: { value: function (value) { // update value $(this.$el).val(value); // if(value==null||value==''){ $(this.$el).trigger('change');

  //}
},
options: function (options) {
  // update options
  $(this.$el).empty().select2({ data: options })
}

}, destroyed: function () { $(this.$el).off().select2('destroy') } });