Estoy tratando de implementar https://github.com/jackocnr/intl-tel-input con vuejs2 .

Si agrego dentro de un jQuery document.ready , $('#phone').intlTelInput({ options...})

Todo funciona como se esperaba, pero cuando trato de obtener el valor del campo de entrada y alguna propiedad boolean válida, siempre verifico el valor un paso atrás.

Mi método de verificación se parece a:

 validatePhoneNumber: function() { var validPhoneNo = $("#phone").intlTelInput("isValidNumber"); var phoneNo = $("#phone").intlTelInput("getNumber"); console.log(phoneNo + ' -> ' + validPhoneNo); //this line returns values one step behind bus.$emit('validate-phone', validPhoneNo) }

El HTML:

 <input class="form-control" @keydown="validatePhoneNumber" :class="{validInput: validPhone }" type="text" name="phone" value="" id="phone" :phone_number="phone_number">

Creo que la solución sería crear una nueva directiva para este asunto, y probé lo siguiente:

Eliminé la parte donde intlTelInput en document.ready e hice esto en su lugar:

 Vue.directive('telinput', { bind: function(el) { $(el).intlTelInput({ //options here... } });

y agregué v-telinput a mi código HTML anterior.

con esto, nada parece funcionar.

¿Qué me estoy perdiendo allí?