Захват событий базового элемента в компоненте

Question

Пытаюсь использовать этот компонент.

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

@change обратный вызов не вызывается. Я знаю, что я могу использовать watch: { value: function () { ... } но есть ли способ перехватить основные события тега?

Answer 1

В текущей версии select2 Компонент не обрабатывает функцию изменения. Для этого вы должны изменить select2 компонент, вы должны добавить еще одну опору: onChange и внутри компонента выполнить функцию, переданную в этом объекте, изменения будут выглядеть примерно так:

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

Теперь вы можете передать функцию, которая будет выполняться на Change, следующим образом:

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