让 VueJS 和 jQuery 更好玩答案

【问题标题】：Make VueJS and jQuery play nice让 VueJS 和 jQuery 更好玩
【发布时间】：2017-08-31 15:13:52
【问题描述】：

此问题与 Using intl-tel-input and vuejs2 together 相关/相似，但仍未得到解答。

还有VueJS Use prop as 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 代码在哪里？你能更具体地回答你的问题吗？根据我的经验，我只需要在 Vue 中使用 jquery 即可利用 jquery datepicker。
需要一些代码，不知道你是怎么做的，我们帮不了你......
请考虑这里的代码：stackoverflow.com/questions/43236848/…，并提到我正在使用github.com/thecodeassassin/bootstrap-remote-data，并在showDetail 方法中添加了var remoteTabsPluginLoaded = new RemoteTabs(customSettings);。
stackoverflow.com/a/42938177/392102
如果你听的是 onInput 事件（即@input）而不是 onKeydown 怎么办？它对我有用。

标签： javascript jquery twitter-bootstrap vue.js vuejs2

【解决方案1】：

让 Vue 与其他 DOM 操作工具包很好地配合使用的方法是将它们完全隔离：如果您打算使用 jQuery 来操作 DOM 小部件，则不要在其上使用 Vue（反之亦然）。

wrapper component 充当桥梁，Vue 可以与组件交互，组件可以使用 jQuery（或其他）操作其内部 DOM 元素。

lifecycle hooks 之外的 jQuery 选择器是一种不好的代码气味。您的 validatePhoneNumber 使用选择器和 DOM 操作调用，但您使用 Vue 来处理 keydown 事件。您需要使用 jQuery 处理此小部件上的所有内容。不要使用 Vue 设置它的类或 phone_number 或处理它的事件。这些都是 DOM 操作。正如我所提到的，如果你将它包装在一个组件中，你可以将 props 传递给组件，然后你可以从这些 props 中使用 jQuery 来设置 class 和 phone_number。

【讨论】：

【解决方案2】：

我认为其背后的原因是when the keydown event is fired，该插件的内部工作开始并没有立即公开电话值。这会导致出现竞争情况，您会在插件本身在内部更新电话号码值之前提前检索电话号码值。

这个问题可以通过监听其他事件来解决，比如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 元素上进行监听。现在我看到该插件只有一个自定义的国家/地区更改回调。

【讨论】：