一起使用 intl-tel-input 和 vuejs2

Posted 2023-02-22

【中文标题】一起使用 intl-tel-input 和 vuejs2

【英文标题】：Using intl-tel-input and vuejs2 together

【发布时间】：2017-08-05 04:50:21

【问题描述】：

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

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

我相信解决方案是为此创建一个新指令，我尝试了以下方法：

删除了我在 document.ready 上实例化 intlTelInput 的部分并改为：

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

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

有了这个，似乎没有任何效果。

我错过了什么？

【问题讨论】：

使用包装组件而不是指令。 vuejs.org/v2/examples/select2.html

我确实试过了，但我遇到了其他一些（不相关的）问题，我无法在主元素 #app 中使用组件...

同时使用 VueJS 和 jQuery 是个坏主意。相反，您应该研究为 Vue 构建的类似内容：github.com/EducationLink/vue-tel-input

嘿，你修好了吗？？

【参考方案1】：

尝试使用@keyup 而不是@keydown

【讨论】：

请不要发布 cmets 作为答案。一旦你有足够的声望，你就可以发布 cmets。 From Review