add pagination

src/App.vue

@@ -18,6 +18,12 @@
 
     <div v-if="isPostLoading" style="margin-top: 15px">Loading...</div>
     <post-list v-else :posts="sortedAndSearchedPosts" @removePost="removePost" class="postList"/>
+
+    <my-pagination
+      :currentPage="page"
+      :totalPages="totalPages"
+      @changePage="changePage"
+    />
   </div>
 </template>
 
@@ -25,9 +31,11 @@
 import PostForm from '@/components/PostForm.vue';
 import PostList from '@/components/PostList.vue';
 import axios from 'axios';
+import MyPagination from '@/components/ui/Pagination.vue';
 
 export default {
   components: {
+    MyPagination,
     PostForm,
     PostList
   },
@@ -41,7 +49,10 @@ export default {
         {value: 'title', name: 'По названию'},
         {value: 'body', name: 'По описанию'}
       ],
-      searchQuery: ''
+      searchQuery: '',
+      page: 1,
+      limit: 10,
+      totalPages: 0
     }
   },
   methods: {
@@ -57,11 +68,20 @@ export default {
     },
     async fetchPosts() {
       try {
-        const {data} = await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10');
-        this.posts = data
+        const { data, headers } = await axios.get(`https://jsonplaceholder.typicode.com/posts`, {
+          params: {
+            _limit: this.limit,
+            _page: this.page
+          }
+        });
+        this.posts = data;
+        this.totalPages = Math.ceil(headers['x-total-count'] / this.limit);
       } catch (e) {
         alert(e.message);
       }
+    },
+    changePage(newPage) {
+      this.page = newPage;
     }
   },
   async mounted() {
@@ -91,6 +111,9 @@ export default {
       } else {
         document.body.style.overflow = 'auto';
       }
+    },
+    page() {
+      this.fetchPosts()
     }
   }
 }

src/components/Post.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="post">
     <div>
+      {{ post.id }}
       <div><strong>Название:</strong> {{post.title}}</div>
       <div><strong>Описание:</strong> {{post.body}}</div>
     </div>

src/components/ui/Pagination.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="page__wrapper">
+    <div
+        v-for="page in totalPages"
+        :key="page"
+        class="page"
+        :class="{
+            'current-page': page === currentPage
+        }"
+        @click="$emit('changePage', page)"
+    >
+      {{page}}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'my-pagination',
+  props: {
+    totalPages: {
+      type: Number,
+      required: true
+    },
+    currentPage: {
+      type: Number,
+      required: true
+    },
+  }
+}
+</script>
+
+<style scoped>
+  .page__wrapper {
+    display: flex;
+    justify-content: center;
+    margin-top: 15px;
+    column-gap: 10px;
+  }
+
+  .page {
+    border: 1px solid teal;
+    padding: 10px;
+    cursor: pointer;
+  }
+
+  .current-page {
+    border: 2px solid teal;
+    font-weight: bold;
+    color: teal;
+  }
+</style>

src/components/ui/index.js

@@ -2,10 +2,12 @@ import Button from '@/components/ui/Button.vue';
 import Input from '@/components/ui/Input.vue';
 import Dialog from '@/components/ui/Dialog.vue';
 import Select from '@/components/ui/Select.vue';
+import Pagination from '@/components/ui/Pagination.vue';
 
 export default [
   Button,
   Input,
   Dialog,
-  Select
+  Select,
+  Pagination
 ]