Esta pregunta está relacionada o es similar a Usar intl-tel-input y vuejs2 juntos , que aún no tiene respuesta.
Y VueJS Use prop como valor de atributo de datos que tiene una solución, pero explica un poco el "entorno".
Entonces, para resumir, estoy configurando dinámicamente una nueva pestaña de arranque (Título y URL) y luego tratando de (re) vincular algunas funciones usando jQuery .
Agregar la siguiente línea https://github.com/thecodeassassin/bootstrap-remote-data/blob/master/js/bootstrap-remote-tabs.js#L258 en mi método Vue aplicará la funcionalidad, pero solo si activo el cambiar dos veces.
El mismo problema con la primera pregunta (sin respuesta).
¿Alguien podría explicar un poco cómo funcionan las cosas entre vueJS y jQuery ? Y cómo resolver las cosas, con suerte sin necesidad de reescribir los paquetes de jQuery.
Si hago console.log , mis variables parecen estar un paso atrás.
ES:
He preparado un Pen para el problema mencionado relacionado: https://codepen.io/AngelinCalu/pen/LWvwNq
La forma de hacer que Vue funcione bien con otros kits de herramientas de manipulación de DOM es segregarlos por completo: si va a usar jQuery para manipular un widget de DOM, no use también Vue en él (y viceversa).
Un componente contenedor actúa como un puente, donde Vue puede interactuar con el componente y el componente puede manipular sus elementos DOM internos usando jQuery (o lo que sea).
Los selectores de jQuery fuera de los ganchos del ciclo de vida son un mal olor de código. Su validatePhoneNumber usa un selector y una llamada de manipulación de DOM, pero está usando Vue para manejar eventos de keydown . Debe manejar todo en este widget con jQuery. No use Vue para configurar su clase o número de teléfono o manejar sus eventos. Esas son todas manipulaciones DOM. Como mencioné, si lo envuelve en un componente, puede pasar accesorios al componente y, a partir de esos accesorios, puede usar jQuery para establecer la clase y el número de teléfono.
Creo que la razón detrás de esto es que cuando se activa el evento keydown , el funcionamiento interno del complemento se activa y no expone inmediatamente los valores del teléfono. Esto da como resultado una condición de carrera en la que recupera prematuramente el valor del número de teléfono antes de que el propio complemento lo actualice internamente.
Este problema se puede resolver simplemente escuchando otros eventos, como keyup o input :
const app = new Vue({ el: '#app', data: { phone_number: "", validPhone: false }, methods: { validatePhoneNumber: function() { var phone_element = $('#phone'); var validPhoneNo = phone_element.intlTelInput("isValidNumber"); var phoneNo = phone_element.intlTelInput("getNumber"); console.log(phoneNo + ' -> ' + validPhoneNo); // I am interested in both values } }, mounted: function() { $('#phone').intlTelInput({ utilsScript: "js/utils.js", initialCountry: "auto", geoIpLookup: function(callback) { $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) { var countryCode = (resp && resp.country) ? resp.country : ""; callback(countryCode); }); }, preferredCountries: [] }); } }); <link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.10/css/intlTelInput.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.10/js/utils.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.10/js/intlTelInput.min.js"></script> <div id="app"> <div class="row"> <div class="col-sm-offset-2 col-sm-6"> <input class="form-control" @input="validatePhoneNumber" :class="{validInput: validPhone }" name="phone" value="" ref="phone_element" :phone_number="phone_number" type="text" id="phone" /> </div> </div> </div>Tengo que admitir que esta todavía no es la solución ideal, porque todavía podría haber una condición de carrera. La única forma de asegurarse de que no exista una condición de carrera es esperar a que el complemento active una devolución de llamada personalizada una vez que se analice y valide el número de teléfono, que puede escuchar en el elemento de entrada en VueJS. En este momento veo que el complemento solo tiene una devolución de llamada personalizada para el cambio de país.