【Vue.js】動的なモーダルウインドウの作り方を解説

今回作成する動的なモーダル今回作成するもののイメージです。自身のポートフォリオから引用しました。 Worksページで画像を一覧表示をさせています。その画像をクリックするとクリックした内容に応じた中身を動的に表示させています。 普通のHTMLで実装しようとすると、作品の個数分モーダルが必要になりますが、 そんな事したらVue使ってる意味がない！ ということで、Vueを使ってModal.vueコンポーネントを作成し、中身はクリックしたものによって動的に変わるように実装します。 Works.vueというページで画像を一覧表示させ、Modal.vueでモーダルウインドウ本体を作成していきます。 Vue.jsの場合であれば、Works.vueが親コンポーネント、Modal.vueが子コンポーネントの関係に当たります。 Vueにおける動的なモーダルの概念図今回実装する機能の概念図はこんな感じです。 赤