구성 요소에있는 기본 요소의 이벤트 캡처

Question

this 구성 요소를 사용하려고합니다.

<select2 v-model="value" :options="options" @change="onChange()"></select2> 

@change 콜백이 호출되지 않습니다. watch: { value: function() { ... }을 사용할 수 있다는 것을 알고 있지만 은 기본 태그 이벤트를 캡처하는 방법이 있습니까?

Answer 1

현재 버전에서는 select2 구성 요소가 변경시 기능을 처리하지 않습니다. 이를 위해, 당신이 가지고있는 select2 구성 요소를 수정, 당신이 한 번 더 소품을 추가해야합니다 : 이제

Vue.component('select2', { 
    props: ['options', 'value', 'onChange'], //Added one more prop 
    template: '#select2-template', 
    mounted: function() { 
    var vm = this 
    $(this.$el) 
     .val(this.value) 
     // init select2 
     .select2({ data: this.options }) 
     // emit event on change. 
     .on('change', function() { 
     vm.$emit('input', this.value) 

     //New addition to handle onChange function 
     if (this.onChange !== undefined) { 
      this.onChange(this.value) 
     } 
     }) 
    }, 
    watch: { 
    value: function (value) { 
     // update value 
     $(this.$el).select2('val', value) 
    }, 
    options: function (options) { 
     // update options 
     $(this.$el).select2({ data: options }) 
    } 
    }, 
    destroyed: function() { 
    $(this.$el).off().select2('destroy') 
    } 
}) 

, 당신이 전달할 수 있습니다 :이 소품에 전달 된 기능을 수행 onChange 및 구성 요소 내부의 변화는 다음과 같이 될 것입니다 다음과 같이 변경 될 함수 :