6/8 Vue.js

自分なりの解釈

googlebook APIを使ってデータを取得後表示するまでの流れ

vuetifyのv-text-fieldコンポーネントにv-modelで入力値をdataと紐付ける

v-btnタグで検索ボタンを作成しクリックで検索メソッド発火

検索内容のkeywordをURLに組み込む必要がある

検索メソッドでURLの共通部分を定数化

keyword部分を定数化してnew　URLsearchParamsに渡すことでURLとして使える形のインスタンスを生成

fetchでURLの共通部分 + keyword部分とすることで入力された値にヒットするデータが返ってくる。

返ってきたデータをjson形式に変換しつつ定数へ

レスポンスの定数をfor分で繰り返しながら必要な中身を取り出してdataに準備していた配列に入れていく。

配列のdataをv-forを使って繰り返し表示する。

v-row v-colでグリッドシステムを使用、v-cardで1つのデータをきれいにまとめて表示を整えると見栄えが良くなる。

コードを消してまた明日1から作ってみる。