変更イベントのSelect2がVuejsで動作していません

Question

vuejsでselect2を使用していましたが、vuejsがnavite htmlで動作しているため、vuejsがjQuery select2で動作していないことが判明しました。

私はこの問題に対処するために、あなたの返事を共有してください。このコード

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"> 

のためだけ糖衣構文です：select要素の場合

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

、v-modelはchangeイベント（ないinput）をリッスンします。したがって、要素が変更されたときにディレクティブがchangeイベントを送出すると、v-modelは期待どおりに動作します。 1分前に尋ねたと答え

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

vuejsデータにselect2値を割り当てることで、この問題を解決できます。ここでカスタムディレクティブを使用しませんでした。

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>

これは良い方法か、あなたがお勧め任意のより良い解決策ではない場合コメントをしてください。