ポートフォリオをVueで作るチュートリアル②(Composition API、TypeScript)

ポートフォリオをVueで作るチュートリアル①(Composition API、TypeScript)の続きです。

ブラウザが下記のような表示になっていますでしょうか。

次に作るのはWORKS、つまり事績を載せるコンポーネントです。

コンポーネントは、概念がわかりにくいですがまとまりを意味します。

つまり実績のコードを１つのまとまりとしてコンポーネントにします。

先に作りたい画面をみてみましょう。

下記のようにしたいと思います。

仕様としては作った年代をセレクトボックスで選べてソートできるような作りにしたいと思います。

ここでは年代としてますが、その他スキルやカテゴリでソートしたりセレクトボックスではなくチェックボックスでソートすることもできますね。

その辺は応用なので余裕のある方はやってみて下さい。

ProductListコンポーネント

これから作るコンポーネントは

・ProductListコンポーネント
・ProductHeaderコンポーネント
・Productコンポーネント

の3つです。

それぞれどのまとまりを担っているかというと以下です。

・ProductList・・・ProductHeaderとProductコンポーネント
・ProductHeader・・・ソート機能
・Product・・・1つ１つの実績

ProductListコンポーネントはProductHeaderとProductをまとめるコンポーネントとなります。

つまり親子でいうと以下の親子関係となります。

・Home.Vueが親コンポーネントーProductList.vueが子コンポーネント
・ProductList.vueが親コンポーネントーProductHeaderが子コンポーネント
・ProductList.vueが親コンポーネントーProductが子コンポーネント

若干ややこしいですがやっていくとわかると思います。

親コンポーネントであるHome.vueが、子であるProductList.vueを読み込んでみます。

/src/views/Home.vue