35 lines
783 B
Vue
35 lines
783 B
Vue
<template>
|
|
<p v-if="$fetchState.pending"></p>
|
|
<p v-else-if="$fetchState.error">
|
|
An error occurred {{ $fetchState.error.message }}
|
|
</p>
|
|
<p v-else-if="!posts.length">No posts found.</p>
|
|
<post-query v-else :posts="posts" :count="count" />
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component } from 'nuxt-property-decorator'
|
|
|
|
@Component<BlogPage>({
|
|
watch: {
|
|
'$route.query.q': '$fetch',
|
|
'$route.query.page': '$fetch',
|
|
},
|
|
async fetch() {
|
|
const { result, count } = await this.$axios.$get('/api/q', {
|
|
params: {
|
|
q: this.$route.query.q,
|
|
page: this.$route.query.page,
|
|
},
|
|
})
|
|
|
|
this.posts = result
|
|
this.count = count
|
|
},
|
|
})
|
|
export default class BlogPage extends Vue {
|
|
posts: IPostTeaser[] = []
|
|
count = 0
|
|
}
|
|
</script>
|