공지사항 페이지에선,
4가지 selector가 있어, 누를 때마다 해당 콘텐츠가 나올 수 있게 fetch해야 한다.
또 해당 콘텐츠의 내용에선 pagination이 존재한다.
pagination은 라이브러리를 사용했고, 처음에 썼던 라이브러리는 커스텀 하기가 좀 어려워서
간단한 걸로 바꿨다. (https://github.com/lokyoung/vuejs-paginate#readme)
$ npm install vuejs-paginate --save사이트에 나와있는대로 적용만 하면 끝이다.
<template>
<paginate
:page-count="20"
:page-range="3"
:margin-pages="2"
:click-handler="clickCallback"
:prev-text="'Prev'"
:next-text="'Next'"
:container-class="'pagination'"
:page-class="'page-item'">
</paginate>
</template>
<script>
export default {
methods: {
clickCallback (pageNum) => {
console.log(pageNum)
}
}
}
</script>
<style lang="css">
.pagination {
}
.page-item {
}
</style>style 적용 할 때, 컬러는 적용이 되는데 font-weight는 안 된다.
왜 그러는지 모르겠지만 라이브러리에선 의문을 갖으면 안 된다는 멘토님의 말씀을 떠올리며..
다른 공부 하러 가야겠다!
