Edit default pagination in vuejs?

Question

I handle vuejs + laravel

I Controller :

public function listData (Request $request)
{
   $currentPage = !empty($request->currentPage) ? $request->currentPage : 1;
   $pageSize = !empty($request->pageSize) ? $request->pageSize : 30;
   $skip = ($currentPage - 1) * $pageSize;
   $totalProduct = Product::select(['id', 'name'])->get();
   $listProduct = Product::select(['id', 'name'])
            ->skip($skip)
            ->take($pageSize)
            ->get();
  return response()->json([
      'listProduct' => $listProduct,
      'total' => $totalProduct,
  ]);
}

In vuejs

data() {
    return {
      pageLength: 30,
      columns: [
        {
          label: "Id",
          field: "id",
        },
        {
          label: "Name",
          field: "name",
        },
      ],
      total: "",
      rows: [],
      currentPage: 1,
    };
  },
  created() {
    axios
      .get("/api/list")
      .then((res) => {
        this.rows = res.data. listProduct;
        this.total = res.data.total;
      })
      .catch((error) => {
        console.log(error);
      });
  },


methods: {
    changePagination() {
      axios
        .get("/api/list", {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageLength,
          },
        })
        .then((res) => {
          this.rows = res.data. listProduct;
          this.total = res.data.total;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },

Template :

<vue-good-table
        :columns="columns"
        :rows="rows"
        :rtl="direction"
        :search-options="{
          enabled: true,
          externalQuery: searchTerm,
        }"
        :select-options="{
          enabled: false,
          selectOnCheckboxOnly: true,
          selectionInfoClass: 'custom-class',
          selectionText: 'rows selected',
          clearSelectionText: 'clear',
          disableSelectInfo: true,
          selectAllByGroup: true,
        }"
        :pagination-options="{
          enabled: true,
          perPage: pageLength,
        }"
      >
       <template slot="pagination-bottom">
          <div class="d-flex justify-content-between flex-wrap">
            <div class="d-flex align-items-center mb-0 mt-1">
              <span class="text-nowrap"> Showing 1 to </span>
              <b-form-select
                v-model="pageLength"
                :options="['30', '50', '100']"
                class="mx-1"
                @input="changePagination"
              />
              <span class="text-nowrap"> of {{ total }} entries </span>
            </div>
            <div>
              <b-pagination
                :value="1"
                :total-rows="total"
                :per-page="pageLength"
                first-number
                last-number
                align="right"
                prev-class="prev-item"
                next-class="next-item"
                class="mt-1 mb-0"
                v-model="currentPage"
                @input="changePagination"
              >
                <template #prev-text>
                  <feather-icon icon="ChevronLeftIcon" size="18" />
                </template>
                <template #next-text>
                  <feather-icon icon="ChevronRightIcon" size="18" />
                </template>
              </b-pagination>
            </div>
          </div>
        </template>

I am dealing with a product list that has 500,000 products. I don't want to take it out once. I want it to pull out 30 products each time, when I click on the partition, it will call to the api to call the next 30 products.. But my problem is the default pageLength is 30 products, When I choose show showing 50 products , it still shows 30 products on the page list (But I console.log (res.data.listProduct)) it shows 50 products, how do I change the default value pageLength. Is there any way to fix this, Or am I doing something wrong. Please advise. Thanks.

Answer 1

Add this into computed =>

paginationOptionsComputed(){
   return { enabled: true, perPage: Number(this.pageLength), }
}

And change :pagination-options="paginationOptionsComputed"

Note: actual problem is that vue-good-table expects perPage as number. If you look at the initializePagination method in here you can see this:

if (typeof perPage === 'number') {
    this.perPage = perPage;
}