这个问题与Using intl-tel-input and vuejs2 together相关/相似，目前仍未得到解答。
而VueJS 使用 prop 作为 data-attribute value有一个解决方案，但解释了一点“环境”。
因此，长话短说，我正在动态设置一个新的引导程序选项卡（标题和 URL），然后尝试使用jQuery.
在我的 Vue 方法中添加以下行https://github.com/thecodeassassin/bootstrap-remote-data/blob/master/js/bootstrap-remote-tabs.js#L258将应用该功能，但前提是我触发改变两次。
与第一个（未回答的）问题相同的问题。
有人可以解释一下vueJS和之间的工作原理jQuery吗？以及如何解决问题，希望不需要重写 jQuery 包。
如果console.log我的变量似乎落后了一步。
乐：
我为相关提到的问题准备了一支笔：https : //codepen.io/AngelinCalu/pen/LWvwNq
让 Vue 与其他 DOM 操作工具包很好地协同工作的方法是将它们完全隔离：如果您打算使用 jQuery 来操作 DOM 小部件，则不要同时在其上使用 Vue（反之亦然）。
甲包装部件充当桥，其中的Vue可以与组件进行交互和组分可以操纵使用jQuery（或其他）其内部的DOM元素。
生命周期钩子之外的 jQuery 选择器是一种糟糕的代码味道。您validatePhoneNumber使用选择器和 DOM 操作调用，但您使用 Vue 来处理keydown事件。您需要使用 jQuery 处理此小部件上的所有内容。不要使用 Vue 设置它的类或电话号码或处理它的事件。这些都是 DOM 操作。正如我提到的，如果你将它包装在一个组件中，你可以将 props 传递给组件，并且你可以从这些 props 中使用 jQuery 来设置 class 和 phone_number。
我认为其背后的原因是当keydown事件被触发时，插件的内部工作会启动并且不会立即暴露电话值。这会导致竞争条件，即您在插件本身内部更新之前过早地检索电话号码值。
这个问题可以简单地通过监听其他事件来解决，例如keyup或input：
const app = new Vue({
el: '#app',
data: {
phone_number: "",
validPhone: false
},
methods: {
validatePhoneNumber: function() {
var phone_element = $('#phone');
var validPhoneNo = phone_element.intlTelInput("isValidNumber");
var phoneNo = phone_element.intlTelInput("getNumber");
console.log(phoneNo + ' -> ' + validPhoneNo); // I am interested in both values
}
},
mounted: function() {
$('#phone').intlTelInput({
utilsScript: "js/utils.js",
initialCountry: "auto",
geoIpLookup: function(callback) {
$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
var countryCode = (resp && resp.country) ? resp.country : "";
callback(countryCode);
});
},
preferredCountries: []
});
}
});<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.10/css/intlTelInput.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.10/js/utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.10/js/intlTelInput.min.js"></script>
<div id="app">
<div class="row">
<div class="col-sm-offset-2 col-sm-6">
<input class="form-control" @input="validatePhoneNumber" :class="{validInput: validPhone }" name="phone" value="" ref="phone_element" :phone_number="phone_number" type="text" id="phone" />
</div>
</div>
</div>我不得不承认这仍然不是理想的解决方案，因为可能仍然存在竞争条件。确保不存在竞争条件的唯一方法是等待插件在解析和验证电话号码后触发自定义回调，您可以在 VueJS 中的 input 元素上侦听。现在我看到该插件只有一个用于国家/地区更改的自定义回调。