Vuetify は Material デザインベースの Vue 用 Component ライブラリで、豊富なコンポーネントと丁寧なマニュアルが魅力だ。 Vuetify を使って Modal を実装する場合には v-dialogue component を使うといいと思う。(他にもっといいのあったら教えてください) 今回はこれをサンプルよりも疎結合になるように実装する方法について。ref を使う。 普通に実装する サンプルを元に簡単に実装すると次のようになる。 <template> <v-app> <div class="text-xs-center"> <v-dialog v-model="dialog" width="500" > <v-btn slot="activator" color="red lighten-2" dark > Click Me </v-btn> <v-card>
![Vuetify でなるべく疎結合になるように ref を使って Modal(モーダル)を実装する](https://cdn-ak-scissors.b.st-hatena.com/image/square/cc4f01586d1bdff3f706e3ca770a73ccd098df94/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VnVldGlmeSUyMCVFMyU4MSVBNyVFMyU4MSVBQSVFMyU4MiU4QiVFMyU4MSVCOSVFMyU4MSU4RiVFNyU5NiU4RSVFNyVCNSU5MCVFNSU5MCU4OCVFMyU4MSVBQiVFMyU4MSVBQSVFMyU4MiU4QiVFMyU4MiU4OCVFMyU4MSU4NiVFMyU4MSVBQiUyMHJlZiUyMCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiUyME1vZGFsJTI4JUUzJTgzJUEyJUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgzJUFCJTI5JUUzJTgyJTkyJUU1JUFFJTlGJUU4JUEzJTg1JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz04NTM4Y2Q3MzQ3ZmRkNTM2Zjc1YmE5ZTJlMzIwMmJmZQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzdXBlcnl1c3VrZSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzJmMmQxNTY2MmQ4MmY1Y2I0YjUzYjY5ZGQyMTEyOWE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D2c8f065576d41f50080d9aca78fe3a56)