src/components/todo/ListComponent.vue

@@ -82,7 +82,7 @@
           <!-- Row의 Index를 이용한 번호 출력 -->
           <template #cell(id)="row">
             <b-link ref="edit/{{row.item.id}}">
-              {{ total - (currentPage * perPage + row.index) + perPage }} :
+              {{ total - (currentPage * perPage + row.index) + perPage }}
             </b-link>
           </template>
           <!-- 제목부분 출력용 -->
@@ -117,15 +117,17 @@
           <p>{{ selectedRows }}</p>
         </b-col>
         <b-col>
+          <template>
             <b-pagination
+              v-model="currentPage"
               :total-rows="total"
               :per-page="perPage"
               @page-click="pageClick"
-            last-number
               aria-controls="todoTable"
+              size="lg"
               class="justify-content-center"
-          >
+            ></b-pagination>
-          </b-pagination>
+          </template>
         </b-col>
         <b-col>
           <b-input-group class="justify-content-end">
@@ -229,11 +231,11 @@ export default {
   setup: function () {},
   created: function () {},
   mounted: function () {
-    this.getDatas(1)
+    this.getDatas()
   },
   unmounted() {},
   methods: {
-    async getDatas(page) {
+    async getDatas() {
       this.isBusy = true
       const results = await this.callAPI('/todo', {
         params: {
@@ -241,7 +243,7 @@ export default {
           sortDirection: this.sortDirection,
           searchFields: this.searchFields,
           search: this.search,
-          page: page,
+          page: this.currentPage,
           perPage: this.perPage
         }
       })
@@ -254,18 +256,20 @@ export default {
       this.isBusy = false
     },
     searchClick() {
-      this.getDatas(1)
+      this.currentPage = 1
+      this.getDatas()
     },
     pageClick(bvEvent, page) {
       console.log(bvEvent)
-      // this.currentPage = page
+      this.currentPage = page
-      this.getDatas(page)
+      this.getDatas()
-      // bvEvent.preventDefault()
+      bvEvent.preventDefault()
     },
     perPageClick(perPage) {
+      this.currentPage = 1
       this.perPage = perPage
       console.log(this.perPage)
-      this.getDatas(1)
+      this.getDatas()
     },
     busyToggle() {
       this.isBusy = !this.isBusy