components/PostList/PostList.vue


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<template>
  <pure-post-list :posts="posts" :loading="loading" />
</template>

<script>
import PurePostList from './PurePostList'

export default {
  name: 'PostList',
  components: { PurePostList },
  props: {
    max: {
      type: Number,
      required: false
    }
  },
  data() {
    return {
      loading: true,
      rawPosts: []
    }
  },
  mounted() {
    this.loadPostsClient()
  },
  computed: {
    posts() {
      if (this.max) {
        return this.rawPosts.slice(0, this.max)
      }
      return this.rawPosts
    }
  },
  methods: {
    async loadPostsClient() {
      let posts = await this.$axios.get(
        `${window.location.origin}/api/posts.json`
      )
      this.rawPosts = posts.data
      this.rawPosts = this.rawPosts.map(post => ({
        title: post.content.meta.title,
        description: post.content.description,
        route: post.route
      }))
      this.loading = false
    }
  }
}
</script>