Select2 on change 事件在 Vuejs 中不起作用

Question

我在 vuejs 中使用 select2，我发现 vuejs 不能使用 jquery select2，因为 vuejs 使用的是 navite html。

我正在使用这段代码

 Vue.directive('select', {
        twoWay: true,
        bind: function () {
            $(this.el).select2()
            .on("select2:select", function(e) {
                this.set($(this.el).val());
            }.bind(this));
            },
        update: function(nv, ov) {
            $(this.el).trigger("change");
        }
    });
    var app = new Vue({
      el: '#app',
      data: {
        supplier_id: "niklesh"
      }
    })
    $('#supplier_id').select2({});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">
<div id="app">
  {{ supplier_id }}

<select id="supplier_id" class='form-control' v-model='supplier_id' v-select='supplier_id'>
    <option value="atul">Atul</option>
    <option value="niklesh">Niklesh</option>
    <option value="sachin">Sachin</option>
</select>

</div>

请分享您的回复以处理此问题。

原文由 Niklesh Raut 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为了让它与指令一起工作，我们需要了解 v-model 是如何工作的。从 文档：

>  <input v-model="something">
>
> ```
>
> 只是语法糖：
>
> ```
>  <input v-bind:value="something" v-on:input="something = $event.target.value">
>
> ```

在选择元素的情况下， `v-model` 将监听 `change` 事件（不是 `input` ）。因此，如果指令在元素更改时调度 `change` 事件，则 `v-model` 将按预期工作。

这是您的代码的更新版本（适用于 Vue 2）：

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 })); }); }, componentUpdated: function(el, me) { // update the selection if the value is changed externally \((el).trigger("change"); } }); var app = new Vue({ el: '#app', data: { supplier_id: "niklesh" }, }) \)(‘#supplier_id’).select2({});

{{ supplier_id }}

Atul Niklesh Sachin

Answer 2

通过将 select2 值分配给 vuejs 数据，我能够解决这个问题。我没有在这里使用自定义指令。

 var app = new Vue({
  el: '#app',
  data: {
    supplier_id: "niklesh"
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
});

$('#supplier_id').on("change",function(){
    app.supplier_id = $(this).val();
    console.log('Name : '+$(this).val());
});

$('#supplier_id').select2({});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">
<div id="app">
  Name : {{ supplier_id | capitalize }}
<select id="supplier_id" class='form-control' v-model='supplier_id'>
    <option value="atul">Atul</option>
    <option value="niklesh">Niklesh</option>
    <option value="sachin">Sachin</option>
</select>

</div>

如果这不是好的方法或您建议的任何更好的解决方案，请发表评论。

原文由 Niklesh Raut 发布，翻译遵循 CC BY-SA 3.0 许可协议