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

Posted 2023-05-07

【中文标题】VueJS Select2 指令不会触发 @change 事件

【英文标题】：VueJS Select2 directive doesn't fire @change event

【发布时间】：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 可能更容易帮助你调试它。

【参考方案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