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 - 페이지당 보여줄 데이터 수
이런 함수를 만들어서 계산하면 된다.
'Front-End > Vue & Nuxt' 카테고리의 다른 글
| Nuxt.js Lottie 사용하기 (0) | 2022.02.27 |
|---|---|
| Eslint Babel정리 (0) | 2022.02.27 |
| Nuxt.js 유용한 모듈 정리 (0) | 2022.02.26 |
| Nuxt.js SCSS 사용 (0) | 2022.02.26 |
| Nuxt.js Transition (0) | 2022.02.26 |