this. $ root. $ emit запускает событие дважды

Question

Я начинаю работать с vue.js, и для моего проекта я увидел необходимость использовать следующий select2 компонент оболочки с официального сайта vue.js, это ссылка: https://vuejs.org/v2/examples/select2.htmlпроблема в том, что мне нужно выдать корневое событие в данный момент, чтобы изменить значение select2, поэтому он добавляет строку кода в следующую часть:

.on('change', function () {
  vm.$emit('input', this.value);
  vm.$root.$emit('eventing', this.value);
})

это работает, но я понял изконсоль vue, что мое событие транслировалось 2 раза, я подумал, что это моя проблема с кодом и удалил добавленную строку, но событие ввода также было выдано дважды, мой вопрос: это нормальное поведение?Это плохая практика?Есть кое-что, чего мне не хватает.Для меня это проблема, которая выдается дважды, так как со времени моего события я делаю вызов ajax, и он выполняется дважды одинаково.

Answer 1

Попробуй выключить в доДестрой ...

beforeDestroy() {
  this.$root.$off('change', yourFunction)
},

Answer 2

Существует более простой способ связать данные с select2 с помощью vue:

Vue.directive('select', {
  twoWay: true,
  bind: function (el, binding, vnode) {
      $(el).select2().on("select2:select", (e) => {
        // v-model looks for
        //  - an event named "change"
        //  - a value with property path "$event.target.value"
        el.dispatchEvent(new Event('change', { target: e.target }));
    });
  },
 });

Это связывает все выборки в экземпляре Vue, чтобы они работали с v-моделью, и вы можете использовать select2

После этого добавьте v-model = "" и v-select = "" к вашему, на который нацелен select2, и все готово.

Кредит: Select2 при изменениисобытие не работает в Vuejs