一起使用 intl-tel-input 和 vuejs2

2024-02-25

我正在尝试实施https://github.com/jackocnr/intl-tel-input https://github.com/jackocnr/intl-tel-input with vuejs2.

如果我在一个 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">

我相信解决方案是为此问题创建一个新指令,我尝试了以下操作:

删除了我实例化的部分intlTelInput on document.ready并做了这个:

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

并添加了v-telinput to my HTML上面的代码。

有了这个,似乎没有任何作用。

我在那里缺少什么?


尝试使用@keyup而不是@keydown

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

一起使用 intl-tel-input 和 vuejs2 的相关文章

随机推荐