У меня есть компонент BlogFeed.vue. Этот компонент отображает посты с пагинацией. Как я могу разбить этот компонент на два компонента? В BlogFeed.vue хотелось бы инклюдить Paginator.vue.
Это мой BlogFeed.vue c пагинацией.
<template>
<div>
<div v-for="post in displayPosts" :key="post.id">
<b-card>
<h3><router-link :to="{ name: 'post_detail', params: {id: post.id} }">{{ post.title }}</router-link></h3>
{{ post.body }}
</b-card>
</div>
<b-btn variant="outline-secondary" v-if="page != 1" @click="page--"> << </b-btn>
<b-btn variant="outline-secondary" v-for="pageNumber in pages.slice(page-1, page+5)" :key="pageNumber" @click="page = pageNumber"> {{pageNumber}} </b-btn>
<b-btn variant="outline-secondary" @click="page++" v-if="page < pages.length"> >> </b-btn>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'App-main',
data() {
return {
page: 1,
perPage: 2,
pages: []
}
},
computed: {
...mapGetters([
'posts',
]),
displayPosts() {
return this.paginate(this.posts)
}
},
methods: {
setPages () {
let numberOfPages = Math.ceil(this.posts.length / this.perPage);
for (let index = 1; index <= numberOfPages; index++) {
this.pages.push(index);
}
},
paginate(page) {
let page_ = this.page;
let perPage = this.perPage;
let from = (page_ * perPage) - perPage;
let to = (page_ * perPage);
return this.posts.slice(from, to);
},
get_posts(){
this.$store.dispatch('GET_POSTS')
}
},
watch: {
posts() {
this.setPages()
}
},
created() {
this.get_posts()
},
}
</script>
Вообще в идеале хотелось бы Paginator.vue подключать не только к BlogFeed.vue но и к другим компонентам в своём проекте.
