Impossible d'utiliser le plugin jquery dans le composant VueJS

Question

J'ai travaillé avec VueJS pendant un moment, et c'est génial. J'ai été capable de l'intégrer avec jQueryUI (pour un ancien site Web) et j'ai créé un composant datepicker, et un composant datetime picker aussi bien, les deux fonctionnent correctement.

Maintenant j'essaye de créer un composant simple de numéro de téléphone, qui fournit simplement une entrée avec un masque qui aide avec le format de numéro de téléphone. Le plugin pour jquery qui fournit le masquage fonctionne correctement, mais si j'essaie de masquer une entrée dans mon composant, cela ne fonctionne pas.

Voici le code exemple dans jsFiddle:

Simple Masked Phone input component for vuejs 2.4.0 - jsfiddle

Javascript:

Vue.component('phone', { 
    template: '#phone', 
    props: { 
    value : { 
     type : String, 
     default: '' 
    }, 
    mask: { 
     type : String, 
     default: '(999) 999-9999' 
    } 
    }, 
    data: function() { 
    return { 
     internalValue: '' 
    }; 
    }, 

    created: function() { 
    this.internalValue = $.trim(this.value); 
    }, 

    mounted: function() { 
    $(this.$el).find('.phone:eq(0)').mask('(999) 999-9999'); 
    }, 

    methods: { 
    updateValue: function (value) { 
      this.$emit('input', value); 
    } 
    } 
}); 

var vueapp = new Vue({ 
    el: '#content', 
    data: { 
    myphone: '' 
    } 
}); 

$('.phonex').mask('(999) 999-9999'); 

HTML:

<div id="content"> 
    <script type="text/x-template" id="phone"> 
    <input type="text" class="phone" v-model="internalValue" v-on:input="updateValue($event.target.value)" /> 
    </script> 

    <label>Vue Phone</label> 
    <phone v-model="myphone"></phone> 
    <br /> 
    {{ myphone }} 
    <br /> 

    <label>Simple Phone</label> 
    <input type="text" class="phonex" /> 
</div> 

Cette est ce que je vois:

Dépendances:

• jquery-2.2.4.min.js
• jquery.maskedinput.min.js (1.4.1)
• vue.js (2.4.0)

Est-ce que je fais mal ici? Merci.

Answer 1

Vous n'avez pas besoin .find('.phone:eq(0)') dans votre jquery, l'enlever semble fixer le masquage (comme le montre here), bien que cela ne semble pas salir avec les données de Vue obligatoire. Après avoir creusé un peu plus, il semble que ce soit known issue.

Et est adressée here:

Vue est une bibliothèque jalouse dans le sens que vous devez laisser complètement posséder le patch de DOM que vous lui donnez (défini par ce que vous passez à el). Si jQuery apporte une modification à un élément géré par Vue, par exemple, ajoute une classe à quelque chose, Vue ne sera pas au courant du changement et ira tout droit et l'écrasera dans le prochain cycle de mise à jour.

La façon de résoudre ce problème consiste à ajouter le gestionnaire d'événements lorsque vous appelez .mask sur l'élément.

Ainsi, par exemple:

mounted: function() { 
    var self = this; 
    $(this.$el).mask('(999) 999-9999').on('keydown change',function(){ 
     self.$emit('input', $(this).val()); 
    }) 
    }, 

Voici le violon avec le correctif: https://jsfiddle.net/vo9orLx2/