[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 폴더를 대체하여 준다.

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

극뽁~!