让VueJS和jQuery玩得很好

Question

这个问题与使用intl-tel-input和vuejs2有关/类似,这仍然没有答案.

并且VueJS使用prop作为具有解决方案的数据属性值,但稍微解释了"环境".

所以,长话短说,我动态设置一个新的引导选项卡(标题和URL),然后尝试(重新)绑定一些功能使用jQuery.

在我的Vue方法中添加以下行https://github.com/thecodeassassin/bootstrap-remote-data/blob/master/js/bootstrap-remote-tabs.js#L258将应用该功能,但仅当我触发改变两次.

与第一个(未答复的)问题相同的问题.

可能有人解释一下的事物之间是如何工作vueJS和jQuery？以及如何解决问题,希望无需重写jQuery包.

如果console.log我的变量只是落后一步.

LE:

我为相关提到的问题准备了一支笔:https: //codepen.io/AngelinCalu/pen/LWvwNq

Answer 1

让Vue与其他DOM操作工具包很好地配合的方法是完全隔离它们:如果你打算使用jQuery来操作DOM小部件,你也不要在它上面使用Vue(反之亦然).

甲包装部件充当桥,其中的Vue可以与组件进行交互和组分可以操纵使用jQuery(或其他)其内部的DOM元素.

生命周期钩子之外的jQuery选择器是一种糟糕的代码味道.您validatePhoneNumber使用选择器和DOM操作调用,但您正在使用Vue来处理keydown事件.您需要使用jQuery处理此小部件上的所有内容.不要使用Vue设置其类或phone_number或处理其事件.这些都是DOM操作.正如我所提到的,如果你将它包装在一个组件中,你可以将props传递给组件,你可以使用jQuery来设置class和phone_number.

Answer 2

我认为其背后的原因是当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 元素上侦听。现在我看到该插件只有一个用于国家/地区更改的自定义回调。