コンポーネントの基底要素のイベントを取得する

Question

thisコンポーネントを使用しようとしています。

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

@changeコールバックが呼び出されていません。私はwatch: { value: function() { ... }を使用できることを知っていますが、は基本的なタグイベントをキャプチャする方法はありますか？

Answer 1

現在のバージョンでは、select2コンポーネントは変更時機能を処理しません。このために、あなたが持っているselect2コンポーネントを変更するために、あなたは1より多くの小道具を追加する必要があります。今すぐ

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をしてコンポーネント内に、変更は次のようになります次のようにonChange関数を実行します：

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