Erfassen von Ereignissen des zugrunde liegenden Elements in Komponente

Question

Versuchen, this Komponente zu verwenden.

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

Der Rückruf @change wird nicht aufgerufen. Ich weiß, dass ich watch: { value: function() { ... } verwenden kann, aber gibt es eine Möglichkeit, zugrunde liegende Tag-Ereignisse zu erfassen?

Answer 1

In der aktuellen Version behandelt die Komponente select2 nicht die Funktion zum Ändern von Daten. Dazu müssen Sie ändern die select2 Komponente, müssen Sie eine weitere Stütze hinzu: onChange und innerhalb Komponente führen Sie die Funktion in diesem prop geben, werden die Änderungen so etwas wie folgt sein:

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') 
    } 
}) 

Jetzt können Sie passieren eine Funktion, die onChange wie folgt ausgeführt wird:

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