Nuxt/examples/new-fetch/pages/posts/_id.vue

55 lines
1.1 KiB
Vue
Raw Normal View History

<template>
<div>
<button @click="$fetch">
Refresh
</button>
<template v-if="$fetchState.pending">
<content-placeholders>
<content-placeholders-heading />
<content-placeholders-text :lines="10" />
</content-placeholders>
</template>
<template v-else-if="$fetchState.error">
<h1>
Post #{{ $route.params.id }} not found
</h1>
</template>
<template v-else>
<h1>{{ post.title }}</h1>
<author :user-id="post.userId" />
<pre>{{ post.body }}</pre>
<p>
<n-link :to="{ name: 'posts-id', params: { id: (post.id + 1) } }">
Next article
</n-link>
</p>
</template>
<p>
<n-link to="/">
Home
</n-link>
</p>
</div>
</template>
<script>
import Author from '~/components/Author.vue'
export default {
components: {
Author
},
data () {
return {
post: {}
}
},
async fetch () {
this.post = await this.$http.$get(`https://jsonplaceholder.typicode.com/posts/${this.$route.params.id}`)
},
head () {
return { title: this.post.title }
}
}
</script>