19.nuxt.jsで画像一覧アプリ:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
19.nuxt.jsで画像一覧アプリ:index.html [2019/02/08] – [画面上に犬種リストを表示する] adash333 | 19.nuxt.jsで画像一覧アプリ:index.html [2019/02/09] (現在) – [犬種リストを保存するストアを作成] adash333 | ||
---|---|---|---|
行 231: | 行 231: | ||
特定の犬種をクリックすると、画像が一覧表示されるようにします。 | 特定の犬種をクリックすると、画像が一覧表示されるようにします。 | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | ===== pages/ | ||
- | |||
- | layouts/ | ||
- | |||
- | pages/ | ||
- | (変更後) | ||
- | {{: | ||
- | |||
- | layouts/ | ||
- | (変更後) | ||
- | {{: | ||
- | |||
- | ===== 犬種リストを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.1549669055.txt.gz · 最終更新: 2019/02/08 by adash333