[JQUERY] VueJS 및 jQuery를 플레이 멋진합니다

VueJS 및 jQuery를 플레이 멋진합니다

해결법

1. ---

   1.다른 DOM-조작 툴킷 잘 뷰 재생을하는 방법은 완전히를 분리하는 것입니다 : 당신이 DOM 위젯을 조작 할 jQuery를 사용하려는 경우, 당신은 또한 그것에 뷰를 사용하지 않는 (반대의 경우도 마찬가지).

   다른 DOM-조작 툴킷 잘 뷰 재생을하는 방법은 완전히를 분리하는 것입니다 : 당신이 DOM 위젯을 조작 할 jQuery를 사용하려는 경우, 당신은 또한 그것에 뷰를 사용하지 않는 (반대의 경우도 마찬가지).

   래퍼 컴포넌트 뷰 구성 요소와 상호 작용할 수 있고, 컴포넌트는 jQuery를 (이든)를 사용하여 내부 DOM 요소를 조작 할 수있는 다리 역할을한다.

   라이프 사이클 후크의 jQuery를 선택기 외부의 나쁜 코드 냄새입니다. 귀하의 validatePhoneNumber는 선택과 DOM-조작 호출을 사용하지만를 keyDown 이벤트를 처리 할 뷰를 사용하고 있습니다. 당신은 jQuery로이 위젯에 모든 것을 처리해야합니다. 동급 또는 PHONE_NUMBER을 설정하거나 이벤트를 처리 할 뷰를 사용하지 마십시오. 사람들은 모든 DOM 조작이다. 내가 언급 한 바와 같이 당신이 구성 요소에 포장하는 경우, 당신은 구성 요소에 소품을 전달할 수 있습니다 그 소품에서 당신은 설정 클래스와 PHONE_NUMBER에 jQuery를 사용할 수 있습니다.

2. ---

   2.나는 뒤에 이유가를 keyDown 이벤트가 발생 될 때, 내부의 플러그인 킥의 동작 및 즉시 전화 값을 표시하지 않는다는 것입니다 생각합니다. 이 플러그인 자체에 의해 내부적으로 업데이트되는 전에 조기에 전화 번호 값을 검색하는 경쟁 조건이 발생합니다.

   나는 뒤에 이유가를 keyDown 이벤트가 발생 될 때, 내부의 플러그인 킥의 동작 및 즉시 전화 값을 표시하지 않는다는 것입니다 생각합니다. 이 플러그인 자체에 의해 내부적으로 업데이트되는 전에 조기에 전화 번호 값을 검색하는 경쟁 조건이 발생합니다.

   이 문제는 단순히의 keyup 또는 입력과 같은 다른 이벤트를 듣고 해결할 수 있습니다 :

   CONST 응용 프로그램은 새로운 뷰를 ({= 엘 : '#app' 데이터 : { 전화 번호: "", validPhone : 거짓 }, 방법 : { validatePhoneNumber : 함수 () { VAR phone_element = $ ( '# 전화'); VAR validPhoneNo는 phone_element.intlTelInput ( "isValidNumber을") =; VAR PHONENO는 phone_element.intlTelInput ( "getNumber을") =; CONSOLE.LOG (PHONENO + '->'+ validPhoneNo); // 나는 두 값에 관심 } }, 장착 : 함수 () { $ ( '# 폰'). intlTelInput ({ utilsScript "JS / utils.js" initialCountry : "자동", geoIpLookup : 함수 (콜백) { $ 갔지 ( 'https://ipinfo.io', 기능 () {}, "JSONP"). 항상 (기능 (RESP) { VAR countryCode와 = (RESP && resp.country)? resp.country : ""; (countryCode와) 콜백; }); }, preferredCountries [] }); } }); <링크 HREF = "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.10/css/intlTelInput.css"REL = "스타일"/> <링크 HREF = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"REL = "스타일"/> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.10/js/utils.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.10/js/intlTelInput.min.js">

   난 여전히 경쟁 조건이가는이있을 수 있기 때문에,이 여전히 이상적인 솔루션 아니라는 것을 인정해야한다. 더 경쟁 조건이 존재하지 않음을 확인하는 유일한 방법은 전화 번호를 구문 분석하고 검증되면 당신이 VueJS의 입력 요소에서 수신 할 수있는 사용자 정의 콜백을 트리거하기 위해 플러그인을 기다릴 것입니다. 지금은 플러그인은 국가의 변화에 ​​대한 사용자 정의 콜백을 가지고 참조하십시오.

from https://stackoverflow.com/questions/43240789/make-vuejs-and-jquery-play-nice by cc-by-sa and MIT license