꼬반 Blog

[Vue.js] vue-material 사용시 event bubbling 문제 해결

Vue에서 ui framework 으로 사용하는 vue-material 에는 작은 버그가 있다.


md-radio 를 포함한 input 모듈에 label 에도 click 이벤트가 걸려있어서 


라벨쪽을 클릭하면 이벤트 버블링이 발생하는 것.


해당 에러를 검색해보니 얼마전 vue-material git hub 에 논의 된 내용이 있었다.


(몇일만 일찍 봤으면 이 이슈는 내것이었을 텐데 ㅂㄷㅂㄷ)


https://github.com/vuematerial/vue-material/pull/954

https://github.com/vuematerial/vue-material/pull/954/commits/1e345ee850100269deec2821bd208633811383d0


이걸 보고 해결하기 위해서는 아직 공식 release 에서는 수정되지 않았으므로 


별도로 vue-material 을 git 으로 내려 받아 


해당 소스에 laebel 쪽에 @click="toggleCheck" => @click.prevent="toggleCheck" 로 수정하고


yarn build 를 해주면 dist 폴더가 삭제 후 다시 빌드된다.


이후 해당 빌드된 폴더를 원래 작업하는 프로젝트 폴더에


node_module/vue-material/dist 폴더를 대체하여 준다.


그리고 프로젝트 에서 확인하여 보면 이벤트 버블링이 발생하지 않는다.


극뽁~!

반응형

Article By 꼬반

*certificate* : VCP 5(2012), RHCSA 7 (2014), RHCE 7 (2015), RHCSA in REDHAT OpenStack(2017) *development language* : Javascript, NodeJS, Golang, html5, css3, shell script *middle ware* : NGINX, Apache, Tomcat, Docker, Docker Swarm, Mesos, Kubernetes, HCI,

Discuss about post