Vue.js select2 Wrapper 组件更改事件

Posted 2023-02-22

【中文标题】Vue.js select2 Wrapper 组件更改事件

【英文标题】：Vue.js select2 Wrapper Component change event

【发布时间】：2019-05-10 18:21:13

【问题描述】：

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

<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" 是错误的，但不确定如何正确添加。如果有人可以帮助实现它，那就太好了。

【参考方案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 () 
          ....