![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3iqZY%2FbtrGtgP28Pw%2FdEWA9kau9sGV41OwZx1qP0%2Fimg.png)
[vue.js] 요소 외부클릭 감지하기 (외부클릭시 요소 변경)
·
과거의 이력/Vue.js
vue 개발환경에서 특정 버튼 클릭시 드롭다운을 활성화 하며, 해당 드롭다운 외부를 클릭할 시 드롭다운을 없애야하는 기능을 구현해야 했다. 이를 위해 특정 요소 외부클릭을 인식해야했다. dom 요소 직접접근하는 방식과 라이브러리를 사용하는 방식 등이 있었으며 나는 추후 이벤트값 활용을 위해 후자를 선택했다. 버튼을 클릭하여 드롭다운을 활성화 한 상태일때, 화면은 아래와 같은 모양이다. 1. 라이브러리 인스톨 나는 v-click-outside 라이브러리를 사용하였다. 우선 라이브러리 인스톨을 수행한다. npm install v-click-outside 2. import 및 directives 추가 import vClickOutside from 'v-click-outside' export default { ..