Nuxt.js Buefy Pagination

Buefy의 Pagination을 이용해서 Nuxt에서 pagination을 구현해보려고 한다.

 

<template>
    <section>
        <b-pagination
            :total="200" <!-- 전체 아이템 갯수 -->
            v-model="current"
            :per-page="10"> <!-- 페이지당 아이템 갯수 -->

            <template #default="props">
                <b-pagination-button
                    :page="props.page"
                    :id="`page${props.page.number}`"
                    tag="router-link"
                    :to="`/documentation/pagination#page${props.page.number}`"> <!-- hash를 사용한 url -->
                    {{ props.page.number }}
                </b-pagination-button>
            </template>


            <template #previous="props">
                <b-pagination-button
                    :page="props.page"
                    tag="router-link"
                    :to="`/documentation/pagination#page${props.page.number}`">
                    Previous
                </b-pagination-button>
            </template>

            <template #next="props">
                <b-pagination-button
                    :page="props.page"
                    tag="router-link"
                    :to="`/documentation/pagination#page${props.page.number}`">
                    Next
                </b-pagination-button>
            </template>

        </b-pagination>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                current: 10,
            }
        },
        watch: {
            $route: {
                immediate: true,
                handler(newVal, oldVal) {
                    if (newVal.hash) {
                        this.current = parseInt(newVal.hash.replace(/#page/g, '')) // url에서 #page 를 ''로 바꾸고 남은 숫자 (페이지 숫자를 가져온다.)
                    }
                },
            },
        }
    }
</script>

참고)

 

Replace()에서 치환을 당담하는것은, 정규식의 g 부분이다. 해당위치에 오는 문자에 따라서

g : 문자열 내의 모든 패턴 체크

i : 대소문자를 구별하지 않음

m : 여러줄에 걸쳐서 체크

 

 

v-for="(item, idx) in posts.slice(sliceStart, sliceEnd)"

slice를 통해 데이터를 자른다음에 보여주면 된다. 페이지네이션이 되면 hash값으로 숫자를 얻을 수 있기 때문에 이를 계산하는 함수로 데이터를 처리해주면 된다. 

 

ex) 만약에 페이지당 10개씩 데이터를 보여주게 된다면 sliceStart는 0이되고 sliceEnd는 10이 된다. 이후에 페이지 네이션이 될때마다 계산을 해주면 되는데 

 

sliceEnd = 페이지네이션 번호 * 페이지당 보여줄 데이터 수

sliceStart = sliceEnd - 페이지당 보여줄 데이터 수

 

이런 함수를 만들어서 계산하면 된다.