Select2 on change event не работает в Vuejs

Question

Я работал с select2 в vuejs, я обнаружил, что 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>

Пожалуйста, поделитесь своим ответом справиться с этой проблемой.

Answer 1

Чтобы получить это, чтобы работать с директивой, нам нужно понять, как работает v-model. Из docs:

<input v-model="something"> 

это просто синтаксический сахар для:

<input v-bind:value="something" v-on:input="something = $event.target.value"> 

В случае выбора элемента, v-model будет слушать для change события (не input). Итак, если директива отправляет событие change, когда элемент изменяется, то v-model будет работать должным образом.

Вот обновленная версия кода:

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

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>

Прокомментируйте, если это не хороший способ или лучше решение вы предлагаете.