javascript - this.$root.$emit 运行事件两次

Question

我开始使用 vue.js，对于我的项目，我看到需要使用来自 vue.js 官方网站的以下 select2 包装器组件这是链接:https://v2.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

有一种更简单的方法可以使用vue将数据绑定(bind)到select2:

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 }));
    });
  },
 });

这将绑定(bind)到 Vue 实例上的所有选择，以便它们与 v-model 一起工作，您可以使用 select2

之后，将 v-model=""和 v-select=""添加到你的 select2 目标中，你就设置好了。

归功于:Select2 on change event is not working in Vuejs