Select2的變化事件在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>

請分享您的回覆來處理這個問題。

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>

請評論，如果這不是很好的方式或任何更好的解決方案，你建議。