19.nuxt.jsで画像一覧アプリ:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
19.nuxt.jsで画像一覧アプリ:index.html [2019/02/09] – [pages/index.vueとlayouts/default.vueの編集] adash333 | 19.nuxt.jsで画像一覧アプリ:index.html [2019/02/09] (現在) – [犬種リストを保存するストアを作成] adash333 | ||
---|---|---|---|
行 231: | 行 231: | ||
特定の犬種をクリックすると、画像が一覧表示されるようにします。 | 特定の犬種をクリックすると、画像が一覧表示されるようにします。 | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | ===== 犬種リストをDog APIで取得する ===== | ||
- | 以下の3つの流れで実装します。(引用元:https:// | ||
- | -Dog API用のクラスを作成 | ||
- | -ページからAPIのエンドポイントを叩く | ||
- | -取得した犬種リストをストアに保存 | ||
- | |||
- | ==== Dog API用のクラスを作成 ==== | ||
- | *apiフォルダを作成 | ||
- | {{: | ||
- | *api/dog.js ファイルを作成 | ||
- | {{: | ||
- | *[[https:// | ||
- | {{: | ||
- | |||
- | ==== 犬種リストを保存するストアを作成 ==== | ||
- | *store/ フォルダ内にindex.js を作成し、これまた、[[https:// | ||
- | {{: | ||
- | |||
- | *ページ側で | ||
- | {{: | ||
- | |||
- | ==== 画面上に犬種リストを表示する ==== | ||
- | 「Vuexの | ||
- | |||
- | pages/ | ||
- | |||
- | {{: | ||
- | |||
- | TypeError | ||
- | Cannot read property ' | ||
- | |||
- | 途中 | ||
- | |||
- | |||
- | |||
- | |||
19.nuxt.jsで画像一覧アプリ/index.html.1549692423.txt.gz · 最終更新: 2019/02/09 by adash333