completed the pagination function for user booking list

resources/assets/js/pages/home.vue

@@ -234,8 +234,7 @@
     <br>
     <br>
     <hr>
-
-    <!-- Booking Table -->
+<!-- Booking Table -->
     <el-row :gutter="20">
       <div>
         <el-table :data="bookingTable">
@@ -275,12 +274,17 @@
           </el-table-column>
         </el-table>
       </div>
-    </el-row>
+    </el-row><br><br>
     <div align="right">
-        <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
+        Previous
+      </el-button>
+      <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
+        Next
+      </el-button>
     </div>
     <!-- Booking Table-end -->
-
   </el-main>
 </template>
 <style>
@@ -358,6 +362,8 @@ export default {
       formLabelWidth: '0px',
       bookingTable: [
       ],
+      url: 'api/booking',
+      pagination: [],
       bookingConfirmTable: {
         date: 'undefined',
         marking: 'undefined',
@@ -372,20 +378,30 @@ export default {
     }
   },
   mounted () {
-    axios
-      .get('/api/booking/')
-      .then((response) => {
-        console.log(response)
-        this.bookingTable = response.data.data
-        // loading.close()
-      }).catch((error) => {
-        // loading.close()
-        // this.$router.push({
-        //   name: 'notfound'
-        // })
-      })
+    this.getBooking()
   },
   methods: {
+    getBooking() {
+      let $this = this
+      axios.get(this.url).then(response => {
+        this.bookingTable = response.data.data
+
+        $this.makePagination(response.data)
+      })
+    },
+    makePagination(data){
+      let pagination =  {
+        current_page: data.current_page,
+        last_page: data.last_page,
+        next_page_url: data.next_page_url,
+        prev_page_url: data.prev_page_url
+      }
+      this.pagination = pagination
+    },
+    fetchPaginateBooking(url) {
+      this.url = url
+      this.getBooking()
+    },
     // TODO fetch booking data on load
     formatter (row, column) {
       return row.address
@@ -408,13 +424,6 @@ export default {
       this.dialogFormVisible = true
       this.term = newterm
     },
-    BookingList () {
-      axios.get('api/booking')
-        .then((response) => {
-          console.log(response)
-          this.list = response.data
-        })
-    },
     // Get calculation before submitting booking
     getCalculationValue (formName) {
       this.loading = true