Vue2_Frontend 수정1...

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,17 +117,15 @@
           <p>{{ selectedRows }}</p>
         </b-col>
         <b-col>
-          <template>
+          <b-pagination
-            <b-pagination
+            :total-rows="total"
-              v-model="currentPage"
+            :per-page="perPage"
-              :total-rows="total"
+            @page-click="pageClick"
-              :per-page="perPage"
+            last-number
-              @page-click="pageClick"
+            aria-controls="todoTable"
-              aria-controls="todoTable"
+            class="justify-content-center"
-              size="lg"
+          >
-              class="justify-content-center"
+          </b-pagination>
-            ></b-pagination>
-          </template>
         </b-col>
         <b-col>
           <b-input-group class="justify-content-end">
@@ -231,11 +229,11 @@ export default {
   setup: function () {},
   created: function () {},
   mounted: function () {
-    this.getDatas()
+    this.getDatas(1)
   },
   unmounted() {},
   methods: {
-    async getDatas() {
+    async getDatas(page) {
       this.isBusy = true
       const results = await this.callAPI('/todo', {
         params: {
@@ -243,7 +241,7 @@ export default {
           sortDirection: this.sortDirection,
           searchFields: this.searchFields,
           search: this.search,
-          page: this.currentPage,
+          page: page,
           perPage: this.perPage
         }
       })
@@ -256,20 +254,18 @@ export default {
       this.isBusy = false
     },
     searchClick() {
-      this.currentPage = 1
+      this.getDatas(1)
-      this.getDatas()
     },
     pageClick(bvEvent, page) {
       console.log(bvEvent)
-      this.currentPage = page
+      // this.currentPage = page
-      this.getDatas()
+      this.getDatas(page)
-      bvEvent.preventDefault()
+      // bvEvent.preventDefault()
     },
     perPageClick(perPage) {
-      this.currentPage = 1
       this.perPage = perPage
       console.log(this.perPage)
-      this.getDatas()
+      this.getDatas(1)
     },
     busyToggle() {
       this.isBusy = !this.isBusy