intl-tel-input과 vuejs2의 병용

intl-tel-input과 vuejs2의 병용

https://github.com/jackocnr/intl-tel-input 를 사용하여 구현하려고 합니다.vuejs2.

1개의 jQuery에 추가할 경우document.ready,$('#phone').intlTelInput({ options...})

모든 것이 예상대로 동작하지만 입력 필드의 값을 가져오려고 할 때boolean유효한 자산, 항상 한 발 늦게 값을 확인합니다.

체크 방법은 다음과 같습니다.

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

HTML:

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

저는 이 문제에 대한 새로운 지침을 만드는 것이 해결책이라고 생각하고, 다음을 시도했습니다.

I'm instantize한 부분 삭제intlTelInput에document.ready대신 이렇게 만들었습니다.

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

라고 덧붙였습니다.v-telinput나의 것HTML위의 코드

이것으로는 아무것도 효과가 없는 것 같아요.

내가 뭘 놓쳤지?

@keydown 대신 @keyup을 사용해 보십시오.

언급URL : https://stackoverflow.com/questions/42792983/using-intl-tel-input-and-vuejs2-together