Select2 auf Änderungsereignis funktioniert nicht in Vuejs

Question

Ich arbeitete mit select2 in vuejs, ich fand, dass vuejs nicht mit jquery select2 arbeitet, da vuejs mit navite html arbeitet.

Ich verwende diesen Code

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>

Bitte Ihre Antwort teilen, dieses Problem zu behandeln.

Answer 1

Um dies mit einer Direktive zu arbeiten, müssen wir verstehen, wie v-model funktioniert. Von der docs:

<input v-model="something"> 

ist nur syntaktischer Zucker für:

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

Im Falle eines select-Element wird v-model für das change Ereignis hören (nicht input). Wenn also die Anweisung ein change -Ereignis auslöst, wenn sich das Element ändert, dann wird v-model wie erwartet funktionieren.

Hier ist eine aktualisierte Version des Codes:

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

Indem ich vuejs-Daten den Wert select2 zuweise, kann ich dieses Problem beheben. Ich habe hier keine benutzerdefinierte Richtlinie verwendet.

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>

Bitte äußern, wenn dies nicht guter Weg ist, oder eine bessere Lösung vor.