19.nuxt.jsで画像一覧アプリ:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
19.nuxt.jsで画像一覧アプリ:index.html [2019/02/08] – [画面上に犬種リストを表示する] adash333 | 19.nuxt.jsで画像一覧アプリ:index.html [2019/02/09] – [画面上に犬種リストを表示する] adash333 | ||
---|---|---|---|
行 186: | 行 186: | ||
==== 画面上に犬種リストを表示する ==== | ==== 画面上に犬種リストを表示する ==== | ||
Vuexの | Vuexの | ||
+ | |||
+ | pages/ | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <v-card class=" | ||
+ | < | ||
+ | <v-flex xs4 v-for=" | ||
+ | <v-card class=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | import dogApi from ' | ||
+ | import {mapState} from ' | ||
+ | |||
+ | export default { | ||
+ | async fetch({store}) { | ||
+ | let json = await dogApi.breeds(); | ||
+ | store.commit(' | ||
+ | }, | ||
+ | // mapState ヘルパー | ||
+ | computed: mapState([' | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | |||
行 200: | 行 237: | ||
- | ===== pages/ | ||
- | layouts/ | ||
- | pages/ | ||
- | (変更後) | ||
- | {{: | ||
- | |||
- | layouts/ | ||
- | (変更後) | ||
- | {{: | ||
- | |||
- | ===== 犬種リストをDog APIで取得する ===== | ||
- | 以下の3つの流れで実装します。(引用元:https:// | ||
- | -Dog API用のクラスを作成 | ||
- | -ページからAPIのエンドポイントを叩く | ||
- | -取得した犬種リストをストアに保存 | ||
- | |||
- | ==== Dog API用のクラスを作成 ==== | ||
- | *apiフォルダを作成 | ||
- | {{: | ||
- | *api/dog.js ファイルを作成 | ||
- | {{: | ||
- | *[[https:// | ||
- | {{: | ||
==== 犬種リストを保存するストアを作成 ==== | ==== 犬種リストを保存するストアを作成 ==== | ||
行 232: | 行 246: | ||
*ページ側で | *ページ側で | ||
{{: | {{: | ||
- | |||
- | ==== 画面上に犬種リストを表示する ==== | ||
- | 「Vuexの | ||
- | |||
- | pages/ | ||
- | |||
- | {{: | ||
- | |||
- | TypeError | ||
- | Cannot read property ' | ||
- | |||
- | 途中 | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
19.nuxt.jsで画像一覧アプリ/index.html.txt · 最終更新: 2019/02/09 by adash333