Vue에서 jQuery events 잡기

vue에서 html태그 내에 사용하는 data 단방향 바인딩 예약어로는 ":value", 이벤트 바인딩을 하기위해 "@change" 예약어를 사용하며, 이 둘을 혼합하여 양방향 바인딩을 하기위한 예약어로 "v-model"를 사용한다.

 

기본적으로 jQuery는 본연의 event system을 사용하기때문에 Vue에서 jQuery가 발생한 이벤트를 잡지 못하기 때문에 혼용하는것은 좋은 방식이 아닌데, 피치못하게 Vue에서 Jquery를 사용하여 HTML 요소 내 값을 직접적으로 건드릴 경우가 있다.

 

이럴때에는 다음과 같이 해결할 수 있다.

 

jquery 모듈이 없으면 설치해 준다.

npm install --save jquery

 

mounted() 생명주기 메서드 내에 jquery 이벤트를 추가해주어 해결할 수 있다.

import $ from "jquery"
...
new Vue({
	...
    data:{
        searchText: ""
    },
    mounted(){
    	// 아래와 같이 값을 받아 직접 사용할 수 있고,
    	$("#search-text-input").on("change", evt=> { this.searchText = evt.target.value; });
        
        // 혹은, 이렇게 메서드를 핸들러로 호출할 수 있다.
        $("#search-text-input").on("change", this.onSearchTextChanged);
    },
    methods: {
    	onSearchTextChanged(event){
        	this.searchText = event.target.value;
        }
    }
    
    ...
});