Vue.js select2 Событие изменения компонента Wrapper - PullRequest
Новая
       15

Vue.js select2 Событие изменения компонента Wrapper

0 голосов
/ 09 декабря 2018

Я использую jquery select2 Wrapper Component.Это мой код, 

<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 Ответ

0 голосов
/ 09 декабря 2018

Поскольку вы отправляете событие из дочернего компонента 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 () {
          ....
...