Methods for specific custom Vue components

Question

I created a custom Vue component.

Vue.component('select2', {
    props: ['apiurl', 'id', 'value'],
    template: '#select2-template',
    mounted: function(){
        var vm = this
        var apiURL = vm.$options.propsData['apiurl']
        $(this.$el).select2({
            placeholder: "Select an option",
            allowClear: true,
            templateResult: dropdownTemplate,
            templateSelection: dropSelection,
            ajax: {
                url: function(params){
                    url = 'api/variable/' + apiURL
                    if(params.term) url = 'api/variable/' + apiURL + '/' + params.term
                    return url
                }
            }
        })
        .on('change', function(){
            vm.$emit('input', this.value)
        })
        //Check if it has a value assigned
        if (vm.$options.propsData['value'] && vm.$options.propsData['value'] != ''){
            element = $(this.$el)
            $.ajax({
                type: 'GET',
                url: 'path/' + apiURL + '/' + vm.$options.propsData['value']
            }).then(function(data) {
                var option = new Option(data.results[0].label, data.results[0].id, true, true)
                element.append(option).trigger('change')
                element.trigger({
                    type: 'select2:select',
                    params: {
                        data: data.results
                    },
                    templateResult: dropdownTemplate,
                    templateSelection: dropSelection
                })
            })
        }
    },
    watch: {
        value: function(value){
            var apiURL = this.$options.propsData['apiurl']
            var element = $(this.$el)
            $.ajax({
                type: 'GET',
                url: 'path/' + apiURL + '/' + value
            }).then(function(data) {
                var option = new Option(data.results[0].label, data.results[0].id, true, true)
                element.append(option).trigger('change')
                element.trigger({
                    type: 'select2:select',
                    params: {
                        data: data.results
                    },
                    templateResult: dropdownTemplate,
                    templateSelection: dropSelection
                })
            })
        },
doThis: function(){
   console.log('b')
}
    },
    methods: {
        doThis: function() {
            console.log('a')
        }
    }
})

My component is working as intended, but I want some of my custom components to do certain functionalities when I change the value. For example:

        <select2 v-model="SomeModel" style="width: 125%;" apiurl="SomeModel" @change="doThis()">
        </select2>

Not all my custom components will implement it, but I do have some that I want to behave a certain way when certain values are selected. As you can imagine, my custom component is a Select2. The @change is not working in my custom component.

Answer 1

Emit a change every time you need to call @change :

.on('change', function(){
    vm.$emit('input', this.value);
    vm.$emit('change');
})

It doesn't matter if the component does not call it.