google_online
@google_online
My morning begins with coffee and Twitter.

Как я могу подключить Paginator.vue в другой компонент?

У меня есть компонент 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 но и к другим компонентам в своём проекте.
  • Вопрос задан
  • 137 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
В простейшем исполнении компонент пагинации должен принимать два параметра - количество страниц и текущая страница. При переключении страницы - эмитить её индекс, в родительском компоненте вы его ловите, показываете соответствующие данные. Как-то так, например.

Ну а вообще, возможно вам стоит посмотреть на уже имеющиеся компоненты пагинации, перед тем как браться за создание собственного - vuetify, element и т.п. На awesome-vue также есть соответствующая подборка.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы