javascript - Vue.js select2 Wrapper 组件改变事件

Question

我正在使用 jquery select2 包装器组件。这是我的代码，

<select2 :options="brands_options" @change="onChange" v-model="brand">
    <option disabled value="0">Select one</option>
</select2>

<select2 :options="models_options" v-model="model">
    <option disabled value="0">Select one</option>
</select2>

<script type="text/x-template" id="select2-template">
    <select>
    <slot></slot>
    </select>
</script>

<script type="text/javascript">
Vue.component('select2', {
    props: ['options', 'value'],
    template: '#select2-template',
    mounted: function () {
        var vm = this
        $(this.$el)
                // init select2
                .select2({data: this.options})
                .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)
                    .trigger('change')
        },
        options: function (options) {
            // update options
            $(this.$el).empty().select2({data: options});
        }
    },
    destroyed: function () {
        $(this.$el).off().select2('destroy');
    }
});

var vm = new Vue({
    el: '#el',
    delimiters: ["[[", "]]"],
    data: {
        brand: 0,
        model: 0,
        brands_options: [],
        models_options: [],
        cross_border: true,
    },
    created: function () {
        this.loadBrands();

    },
    methods: {
        loadBrands: function () {
            var vm = this;
            axios.get('http://localhost:81/tenly/public/get_brands')
                    .then(function (response) {
                        vm.brands_options = response.data;
        {#                                alert(JSON.stringify(vm.brands_options[0].id));#}
                                    axios.get('http://localhost:81/tenly/public/get_brand_model/' + vm.brands_options[0].id)
                                            .then(function (response) {
                                                vm.models_options = response.data;
        {#                                            alert(JSON.stringify(vm.models_options));#}
                                            })
                                            .catch(function (error) {
                                                vm.models_options = 'An error occured' + error;
                                            });
                                })
                                .catch(function (error) {
                                    vm.brands_options = 'An error occured' + error;
                                });
                    },
                    onChange(event) {
                        alert(event.target.value);
                    }
                }
            });
            </script>

在这里，我试图从 onchange 事件中提醒值。认为我添加的@change="onChange"是错误的，但不确定如何正确添加。如果有人可以帮助实现它，那就太好了。

Answer 1

由于您通过以下语句从子组件 select2 发出事件:

  vm.$emit('input', this.value);

所以你应该这样做:

 <select2 :options="brands_options" @input="onChange" v-model="brand">
    <option disabled value="0">Select one</option>
   </select2>

并将onChange添加到Vue实例的方法中，如下所示:

    methods: {
       onChange(value){
         //do whatever you want with value
         },
        loadBrands: function () {
          ....