Nuxt.jsで一覧から詳細的な画面に遷移する

はじめに

前回、APIからの取得結果をストアに入れるようにしたので詳細画面的な物を作ってみる。

詳細表示用コンポーネント

components/ItemDetail.vue

<template>
    <div class="item">
        <div>ID: {{id}}</div>
        <div>名前: {{name}}</div>
        <div>値段: {{price}}</div>
        <div>説明: {{description}}</div>
    </div>
</template>

<script>
    export default {
        name: "ItemDetail",
        props: {
            id: String,
            name: String,
            price: Number,
            description: String,
        }
    }
</script>

単純に内容を表示するだけのコンポーネント

詳細ページ

pages/items/_id.vue

<template>
    <div id="app">
        <h1>Nuxt API Test Detail</h1>
        <div class="itemContainer">
            <ItemDetail
                    v-bind:id="items[$route.params.id].id"
                    v-bind:name="items[$route.params.id].name"
                    v-bind:price="items[$route.params.id].price"
                    v-bind:description="items[$route.params.id].description"
            >
            </ItemDetail>
        </div>
        <div class="button">
            <nuxt-link to="/search">戻る</nuxt-link>
        </div>
    </div>
</template>

<script>
    import ItemDetail from '~/components/ItemDetail.vue'
    import { mapGetters } from 'vuex'

    export default {
        components: { ItemDetail },
        head: { title: 'Nuxt API Detail Test' },
        async asyncData({ store, params }) {
            if (!store.getters.fetched) {
                await store.dispatch('fetchItems')
            }
            await store.dispatch('fetchRecommended', params.id);
        },
        computed: {
            ...mapGetters(['items', 'recommended'])
        }
    }
</script>

詳細への遷移元

components/Item.vue

<template>
    <div class="item">
        <div>ID: {{id}}</div>
        <div>名前:<nuxt-link :to="`/items/${id}`">{{name}}</nuxt-link></div>
        <div>値段: {{price}}</div>
    </div>
</template>

名前の部分からnuxt-linkで遷移するようにする。

結果