【发布时间】：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
-
嘿，你修好了吗？？
标签： jquery vuejs2 vue-directives