一起使用intl-tel-input和vuejs2 [英] Using intl-tel-input and vuejs2 together

问题描述

我正在尝试实现 https://github.com/jackocnr/intl-tel-用vuejs2输入.

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

如果我在一个jQuery document.ready中添加$('#phone').intlTelInput({ options...})

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

一切正常，但是当我尝试获取输入字段和某些boolean有效属性的值时，我总是在后面检查值.

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.

我的检查方法如下:

    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 believe the solution would be to create a new directive for this matter, and I tried the following:

删除了我在document.ready上实例化intlTelInput的部分，并将其替换为:

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

并将v-telinput添加到上面的HTML代码中.

and added v-telinput to my HTML code above.

与此有关，似乎没有任何作用.

with this, nothing seems to work.

我在那里想念什么?

推荐答案

尝试使用@keyup代替@keydown

Try to use @keyup instead of @keydown

这篇关于一起使用intl-tel-input和vuejs2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！