VueJS Select2 指令不会触发 @change 事件答案

【问题标题】：VueJS Select2 directive doesn't fire @change eventVueJS Select2 指令不会触发 @change 事件
【发布时间】：2016-04-29 03:00:41
【问题描述】：

正如标题所说，我使用他们页面中的示例为 VueJS 1.0.15 注册了 Select2 指令。我想捕捉@change 事件，但它不起作用。

HTML：

<select v-select="item.service" :selected="item.service" @change="serviceChange(item)">
  <option value="1">test 1</option>
  <option value="2">test 2</option>
</select>

JS：

Vue.directive('select', {
    twoWay: true,
    params: ['selected'],
    bind: function () {
        var self = this
        $(this.el)
            .select2({
                minimumResultsForSearch: Infinity
            })
            .val(this.params.selected)
            .on('change', function () {
                console.log('changed');
                self.set(this.value);
            })
    },
    update: function (value) {
        $(this.el).val(value).trigger('change')
    },
    unbind: function () {
        $(this.el).off().select2('destroy')
    }
});

var Checkout = new Vue({
      el: '.Checkout',
      methods: {
      serviceChange: function (item) {
          console.log(item);
      },
    }
});

【问题讨论】：

如果你为它设置一个 jsfiddle 可能更容易帮助你调试它。

标签： javascript jquery-select2 vue.js

【解决方案1】：

扩展了 Alberto Garcia 的答案。

var selectDropDown = $(".select-drop-down").select2();

selectDropDown.on('select2:select', function (e) {
    var event = new Event('change');
    e.target.dispatchEvent(event);
});

【讨论】：

感谢您的解决方案！我正在使用多选，所以我还必须在select2:unselect 上触发更改事件，如下所示：selectDropDown.on("select2:select select2:unselect", function (e) {

【解决方案2】：

是的，我遇到了这个问题。还没有想出解决方案，但这是我目前使用watch的工作：

在你的 VueJS 中：

watch: {

    /**
     * Watch changes on the select2 input
     *
     * @param integer personId
     */
    'person': function (personId) {
        var personName = $("#person").select2('data')[0].text
        this.doSomethingWithPerson(personId, personName)
    }
},

然后在你的 HTML 中：

<select
        id="person"
        v-select2="person"
        class="form-control"
        data-options="{{ $peopleJSON }}"
        data-placeholder="Choose a person"
>
</select>

注意：在上面的 HTML 中，{{ $peopleJSON }} 是我使用 Blade 模板引擎插入服务器端 JSON 的方式。与问题无关。

【讨论】：

【解决方案3】：

我最近在尝试将 select2 结果绑定到 vuejs 数据模型对象时遇到问题，我提供了一个解决方法，它可能会对您有所帮助：

https://jsfiddle.net/alberto1el/7rpko644/

var search = $(".search").select2({
  ajax: {
    url: "/echo/json",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term
      };
    },
    processResults: function (data, params) {
      var mockResults = [{id: 1,text: "Option 1"}, {id: 2,text: "Option 2"}, {id: 3,text: "Option 3"}];
      return {results: mockResults};
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; },
  minimumInputLength: 1
});

search.on("select2:select", function (e){
    $('.result_search').val( $(this).val() ).trigger( 'change' );
});

var vm = new Vue({
  el: "#app",
  data: {
    busqueda_result : ''
  }
});

我知道你正在使用指令，但也许它可以帮助你

【讨论】：

【解决方案4】：

你不应该使用 $emit 吗？

update: function (value) {
    $(this.el).val(value);
    this.$emit('change');
}

【讨论】：

这似乎不起作用。我认为 $emit 在指令的上下文中不可用。
你基本上是在用手表进行脏检查
你说得对，指令上下文中不存在$emit