【Vue Router】APIを使用して動的なSPAを作成する
第一回
【Vue Router】Vue Routerを使って2つのコンポーネントを画面遷移なしで切り替えたい - Laravelとねころっけくん5.8
第二回
【Vue Router】URLのパラメーターから個別ページに移動したい - Laravelとねころっけくん5.8
今回はあらかじめ用意しておいた商品データベースAPIを使用して、動的な商品詳細ページ作成を行なっていきます。
src/api/products.jsの作成
srcディレクトリにapiというディレクトリを作成し、その中にさらにproducts.jsというjsファイルを作成します。
products.js
//商品のリスト const database = [ {id:1, name:'商品A', price:345, content:'商品Aの紹介です'}, {id:2, name:'商品B', price:9876, content:'商品Bの紹介です'}, {id:3, name:'商品C', price:123, content:'商品Cの紹介です'}, ] //インポート先で使用できる関数をオブジェクトとしてまとめたもの export default { // databaseを取得 fetch(id) { return database }, // idパラメーターに従ってdatabaseからdataを抽出 find(id) { return database.find(el => el.id === id) }, asyncFind(id, callback) { setTimeout(() => { callback(database.find(el => el.id === id)) }, 1000) } }
ProductList.vueの編集
<template>
<div class="product-list">
<h1>商品一覧</h1>
<ul>
<!--受け取ったdatabaseをv-forでリストレンダリング-->
<li v-for="{id,name} in list" :key="id">
<router-link :to="`/product/${ id }`">{{ name }}</router-link>
</li>
</ul>
</div>
</template>
<script>
import products from '@/api/products.js'
export default {
computed: {
// products.jsから引き受けたdatabaseをlistという変数にして受け取る
list: () => products.fetch()
}
}
</script>
