VueJ와 jQuery를 멋지게 플레이하다

VueJ와 jQuery를 멋지게 플레이하다

이 질문은 intl-tel-input과 vuejs2를 함께 사용하는 것과 관련이 있거나 비슷하지만 아직 답변되지 않았습니다.

또한 VueJs는 솔루션을 가지고 있지만 "환경"에 대해 설명하는 데이터 속성 가치로 프로포트를 사용합니다.

요컨대, 새로운 부트스트랩 탭(제목과 URL)을 동적으로 셋업하고 나서, 다음의 방법으로 몇개의 기능을 바인드(재바인드)하려고 합니다.jQuery.

Vue 메서드에 다음 행 https://github.com/thecodeassassin/bootstrap-remote-data/blob/master/js/bootstrap-remote-tabs.js#L258을 추가하면 이 기능이 적용됩니다.단, 변경을 두 번 트리거한 경우에만 해당됩니다.

첫 번째(미답변) 질문에서도 같은 문제.

누가 어떻게 이런 일이 일어나는지 설명 좀 해줄래?vueJS그리고.jQueryjQuery 패키지를 다시 작성할 필요 없이 문제를 해결하는 방법도 있습니다.

만약 내가console.log내 변수는 한 발짝만 늦춰진 것 같아요.

LE:

https://codepen.io/AngelinCalu/pen/LWvwNq에 기재되어 있는 문제의 펜을 준비했습니다.

Vue를 다른 DOM 관리 툴킷과 잘 작동시키는 방법은 이들을 완전히 분리하는 것입니다.jQuery를 사용하여 DOM 위젯을 조작할 경우 Vue도 사용하지 않습니다(반대도 마찬가지).

래퍼 컴포넌트는 브릿지 역할을 하며 여기서 Vue는 컴포넌트와 상호 작용할 수 있으며 컴포넌트는 jQuery(또는 기타)를 사용하여 내부 DOM 요소를 조작할 수 있습니다.

j라이프 사이클 훅 이외의 쿼리 셀렉터는 코드 냄새가 심합니다.당신의.validatePhoneNumberSelector와 DOM 조작 콜을 사용하지만 Vue를 사용하여 처리한다.keydown이벤트입니다.jQuery를 사용하여 이 위젯의 모든 작업을 처리해야 합니다.클래스 또는 phone_number를 설정하거나 이벤트를 처리하기 위해 Vue를 사용하지 마십시오.모두 DOM 조작입니다.앞서 말했듯이 컴포넌트에 랩하면 컴포넌트에 소품을 전달할 수 있으며, 이 소품에서 jQuery를 사용하여 클래스 및 phone_number를 설정할 수 있습니다.

그 배경에는, 이벤트가 발생했을 때에 플러그 인의 내부 동작이 기동해, 곧바로 전화기의 값이 표시되지 않는 것이 원인이라고 생각합니다.이로 인해, 플러그 인 자체에 의해서 내부적으로 갱신되기 전에, 전화 번호의 값을 조기에 취득하는 레이스 상태가 됩니다.

는 단순히 될 수 .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>

아직 인종 문제가 남아있을 수 있기 때문에, 이것이 이상적인 해결책은 아니라는 것을 인정해야 합니다.레이스 조건이 존재하지 않는 것을 확인하는 유일한 방법은 VueJ의 입력 요소에서 수신할 수 있는 전화번호를 해석하고 검증한 후 플러그인이 커스텀콜백을 트리거할 때까지 기다리는 것입니다현재 플러그인에는 국가 변경에 대한 커스텀콜백만 있습니다

언급URL : https://stackoverflow.com/questions/43240789/make-vuejs-and-jquery-play-nice