今日は画像をカテゴリ別に表示する画面を実装しました。
けっこう時間かかりましたが、なんとか自力で実装できたので達成感があります。
書いたコードは以下になります。
処理は大きく分けて以下の二つ。
上記の処理を実装するにあたって、画面遷移時に都道府県一覧を取得する処理はmountedで以下のように書きました。
async mounted() {
api.get('/fetchPrefectureCategories')
.then((res) => {
this.prefectureCategories = res.data
})
}
一応上記のコードで想定通りに動きはしましたが、自分で気になる点としてはVue.jsのmountedとcreatedの違いがまだわかってないことと、asyncの意味がわかってないことです。
後からもっと良い書き方がわかったらどんどんリファクタリングしていきたいですね。
ググればけっこう記事見つかるので、時間作って勉強します。
書き方にあやふやな点はあるものの、上記の処理でthis.prefectureCategoriesにデータが入るので、templateの部分で以下のように書いてプルダウンメニューを表示するようにしました。
<v-container fluid>
<v-row align="center">
<v-col
class="d-flex"
cols="12"
sm="6"
>
<v-select
:items="prefectureCategories"
item-text="prefecture_name"
item-value="prefecture_category_cd"
label="都道府県"
v-model="items"
@change="fetchImageByPrefectureCd(items)"
></v-select>
</v-col>
</v-row>
</v-container>
プルダウンメニューの書き方はVuetifyの公式ドキュメントに書かれていたものを参考にしています。
実装前の自分のイメージでは、プルダウンメニューに表示するにはv-forを書く必要があるかと思ってたんですが、Vuetifyのv-selectでitem-textを指定するだけでAPIから渡した都道府県データが全て表示されました。
ここらへんの謎も時間作って一つずつ勉強したいところです。が、まずはアプリを完成させるのが第一優先なのでどんどん先に進みたいと思います。
上記のv-selectに@changeで関数を指定しているので、プルダウンメニューから都道府県がクリックされたタイミングで以下の関数が実行されます。
methods: {
fetchImageByPrefectureCd(value) {
api.post('/fetchImageByPrefectureCd',{
'prefecture_category_cd': value
})
.then((res) => {
console.log(res)
this.prefecturePosts = res.data
})
}
}
都道府県カテゴリーコードをWhere条件にして画像を取得するAPIはすでに実装しているので、プルダウンメニューから選択した都道府県カテゴリーコードを引数にしてAPIを呼び出します。
上記でthis.prefecturePostsに都道府県別の画像一覧が格納されるので、後は画像表示用のコンポーネントに画像データを渡して表示できました。
フロントエンドは知見が浅くコードの中にアンチパターンが入っている箇所もあるかと思いますがひとまず想定通りに動いて良かったです。 どんどん実装しつつ悪いところに気付き次第リファクタリングもしっかり進めていきたいと思います。
