5

I am trying to implement https://github.com/jackocnr/intl-tel-input with vuejs2.

If I add inside one jQuerydocument.ready, $('#phone').intlTelInput({ options...})

Everything works as expected but when I'm trying to fetch the value of the input field and some boolean valid property, I am always checking the value one step behind.

My checking method looks like:

    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)
    }

The HTML:

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

I believe the solution would be to create a new directive for this matter, and I tried the following:

Removed the part where I instantiated the intlTelInput on document.ready and made this instead:

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

and added v-telinput to my HTML code above.

with this, nothing seems to work.

What am I missing there?

Angelin Calu
  • 1,905
  • 8
  • 24
  • 44
  • Use a wrapper component instead of a directive. https://vuejs.org/v2/examples/select2.html – Bert Mar 14 '17 at 19:09
  • I did tried that, I got stuck into some other (non-related) issue where I couldn't use the component inside the main element `#app`... – Angelin Calu Mar 14 '17 at 19:12
  • It's a bad idea to use VueJS and jQuery together. Instead you should be looking into something like this that is built for Vue: https://github.com/EducationLink/vue-tel-input – maxshuty Sep 28 '18 at 16:57
  • hey, do u fix it?? – Amal S R Aug 07 '19 at 06:50

1 Answers1

0

Try to use @keyup instead of @keydown

Тима Павлов
  • 21
  • 1
  • 3
    Please don't post comments as answers. Once you have enough reputation, you will be able to post comments. [From Review](https://stackoverflow.com/review/late-answers/20230419) – Taku Jul 07 '18 at 04:19