แสดงหน้าเว็บ 1 รายการจาก API ด้วย Nuxt

บทเรียนรู้นี้เรามาเขียนโปรแกรมแสดงหน้าเว็บ 1 รายการจากหน้า index ที่รวมเนื้อหาไว้ เช่น หน้ารวมของ Blog เมื่อคลิกแต่ละเรื่องก็จะแสดงรายละเอียด เป็นต้น ในบทเรียนรู้นี้เรามาเขียนโปรแกรมแสดงรายละเอียดกัน 

สร้างไฟล์ pages/posts/_id/index.vue จากนั้นเขียนโปรแกรมดังนี้

<template>
    <div>
        <h1>{{post.title}}</h1>
        <p>{{post.body}}</p>
        <nuxt-link to="/posts">กลับ</nuxt-link>
    </div>
</template>

<script>
import axios from '@nuxtjs/axios'

export default {
    validate({params}) {
        return /^\d+$/.test(params.id)
    },
    data() {
        return {
            post: []
        }
    },
    async asyncData({params, $axios}) {
        let {data} = await $axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
        return {post: data}
    },
    head() {
        return {
            title: this.post.title
        }
    }
}
</script>

เมื่อเปิดดูจะปรากฏดังนี้