jQuery Girl
  1. jQuery Girl
  3. L’événement Select2 on change ne fonctionne pas dans Vuejs
Intereting Posts
Sélection d’éléments dans une liste avec Backbone.js Choix dynamic de l’effet de fermeture sur une boîte de dialog jquery-ui Recherchez les options d’une sélection, trouvez la valeur, ajoutez-y la sélection et écrivez son texte html sur un div jquery selector pour toutes les cases à cocher non désactivées IE ne détecte pas la méthode de changement de jQuery pour la case à cocher jQuery travaille sur une mauvaise hauteur, en raison de @ font-face sélectionne le dernier enfant de l’élément qui n’a pas une certaine classe Jquery ne fonctionne pas dans Master Page avec ASP.NET C # et fonctionne correctement avec sans utiliser de page maître Réinitialiser jQuery one () pour qu’il se déclenche à nouveau ExecJS :: RuntimeError dans le moteur 3.2.8 de rails avec javascript_include_tag Réagir à un événement seulement une fois toutes les 5 secondes Passer plusieurs parameters dans un script Ajax jQuery L’événement textbox onchange à l’aide de jquery provoque une erreur d’exécution JScript: “Déductions” n’est pas défini Création d’un diaporama JQuery d’une image d’arrière-plan Utiliser jQuery dans le contexte d’une table MySQL

L’événement Select2 on change ne fonctionne pas dans Vuejs

Je travaillais avec select2 dans vuejs, j’ai constaté que vuejs ne fonctionnait pas avec jquery select2 car vuejs utilisait navite html.

J’utilise ce 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).sortinggger("change"); } }); var app = new Vue({ el: '#app', data: { supplier_id: "niklesh" } }) $('#supplier_id').select2({}); 
      
 {{ supplier_id }}  Atul Niklesh Sachin

S’il vous plaît partagez votre réponse pour résoudre ce problème.

Pour que cela fonctionne avec une directive, nous devons comprendre le fonctionnement de v-model . De la docs :

est juste du sucre syntaxique pour:

Dans le cas d’un élément select, v-model écoutera l’événement change (pas l’ input ). Ainsi, si la directive dissortingbue un événement change lorsque l’élément change, alors v-model fonctionnera comme prévu.

Voici une version mise à jour de votre code: 

 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({}); 
      
 {{ supplier_id }}

En affectant la valeur select2 aux données de vuejs, je peux résoudre ce problème. Je n’ai pas utilisé la directive personnalisée ici. 

 var app = new Vue({ el: '#app', data: { supplier_id: "niklesh" }, filters: { capitalize: function (value) { if (!value) return '' value = value.toSsortingng() 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({}); 
      
 Name : {{ supplier_id | capitalize }}