main.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { createApp } from 'vue'; import './style.css'; import App from './App.vue'; import VueAwesomePaginate from "vue-awesome-paginate"; // Import necessary CSS files import "vue-awesome-paginate/dist/style.css"; const app = createApp(App); // Register VueAwesomePaginate as a plugin app.use(VueAwesomePaginate); // Mount the app app.mount('#app'); |
App.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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<script setup lang="ts"> import { ref, onMounted, computed } from "vue"; import axios from "axios"; const posts = ref([]); // To store the fetched posts const currentPage = ref(1); // Current page const itemsPerPage = 10; // Posts per page // Fetch data from JSONPlaceholder API const fetchPosts = async () => { try { const response = await axios.get("https://jsonplaceholder.typicode.com/posts"); posts.value = response.data; } catch (error) { console.error("Error fetching posts:", error); } }; // Get the posts for the current page const paginatedPosts = computed(() => { const start = (currentPage.value - 1) * itemsPerPage; const end = start + itemsPerPage; return posts.value.slice(start, end); }); onMounted(fetchPosts); // Fetch posts on component mount </script> <template> <div> <!-- Display the posts --> <ul> <li v-for="post in paginatedPosts" :key="post.id"> <h3>{{ post.title }}</h3> <p>{{ post.body }}</p> </li> </ul> <!-- Pagination component --> <vue-awesome-paginate :total-items="posts.length" :items-per-page="itemsPerPage" :max-pages-shown="5" :show-ending-buttons="true" :show-breakpoint-buttons="false" v-model="currentPage" /> </div> </template> <style> .pagination-container { display: flex; column-gap: 10px; } .paginate-buttons { height: 40px; width: 40px; border-radius: 20px; cursor: pointer; background-color: rgb(242, 242, 242); border: 1px solid rgb(217, 217, 217); color: black; } .paginate-buttons:hover { background-color: #d8d8d8; } .active-page { background-color: #3498db; border: 1px solid #3498db; color: white; } .active-page:hover { background-color: #2988c8; } </style> |
