[Vuetify] v-dialog 외부 click 시 닫히게 하는 방법

1. V-dialog 창 이외부분 클릭시 close 하는 방법

제목이 좀 이상하게 이해가 안되실수도 있습니다. ^^ 
vuetify 에서 제공하는 v-dialog 를 사용해서 아래 이미지와 같이 창을 적용해 보았습니다. 

근데 dialog 이외의 부분을 클릭을 해도 창이 사라지지 않는 현상이 생겨서 알게된 것을 posting 합니다. 

v-dialog 속성에 보면 outside라는 속성이 있는데 이것을 활용하면 창이외 영역을 클릭을 하면 사라지더라구요. 

소스 코드는 아래와 같습니다. 

 

2. V-dialog 속성 링크 주소 

https://vuetifyjs.com/en/api/v-dialog/

Vuetify — A Material Design Framework for Vue.js

위의 주소에 접속을 해보시면 여러가지 Event가  있지만 제가 이번에 적용한 것은 아래와 같습니다. 

click:outside 좀 생소하지만 사용방법은 위에 예시처럼 사용을 하시면 정말 편하게 사용하실수 있습니다.