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の | ||
- | |||
- | |||
- | |||
- | |||
- | ===== 犬種リストと、それぞれの犬種の画像リストのページの構成について ===== | ||
- | 引き続き、https:// | ||
- | |||
- | 特定の犬種をクリックすると、画像が一覧表示されるようにします。 | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | ===== pages/ | ||
- | |||
- | layouts/ | ||
pages/ | pages/ | ||
- | (変更後) | + | < |
- | {{: | + | < |
+ | < | ||
+ | <v-card class=" | ||
+ | < | ||
+ | <v-flex xs4 v-for=" | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
- | layouts/default.vue | + | < |
- | (変更後) | + | import dogApi from '@/api/ |
- | {{: | + | import |
- | ===== 犬種リストをDog APIで取得する ===== | + | export default { |
- | 以下の3つの流れで実装します。(引用元:https: | + | async fetch({store}) { |
- | -Dog API用のクラスを作成 | + | let json = await dogApi.breeds(); |
- | | + | |
- | | + | }, |
+ | | ||
+ | computed: mapState([' | ||
+ | } | ||
+ | </script> | ||
+ | </code> | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
- | ==== Dog API用のクラスを作成 ==== | ||
- | *apiフォルダを作成 | ||
- | {{: | ||
- | *api/dog.js ファイルを作成 | ||
- | {{: | ||
- | *[[https:// | ||
- | {{: | ||
- | ==== 犬種リストを保存するストアを作成 ==== | ||
- | *store/ フォルダ内にindex.js を作成し、これまた、[[https:// | ||
- | {{: | ||
- | *ページ側で | ||
- | {{: | ||
- | |||
- | ==== 画面上に犬種リストを表示する ==== | ||
- | 「Vuexの | ||
- | |||
- | pages/ | ||
- | |||
- | {{: | ||
- | |||
- | TypeError | ||
- | Cannot read property ' | ||
- | |||
- | 途中 | ||
+ | ===== 犬種リストと、それぞれの犬種の画像リストのページの構成について ===== | ||
+ | 引き続き、https:// | ||
+ | 特定の犬種をクリックすると、画像が一覧表示されるようにします。 | ||
19.nuxt.jsで画像一覧アプリ/index.html.1549667976.txt.gz · 最終更新: 2019/02/08 by adash333