vuejs에서 기본 페이지 지정을 편집하시겠습니까?

vuejs에서 기본 페이지 지정을 편집하시겠습니까?

나는 vuejs + laravel을 취급한다.

I 컨트롤러:

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,
  ]);
}

부에즈에서

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);
        });
    },
  },

템플릿:

<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>

나는 50만 개 제품이 있는 제품 리스트를 다루고 있어.한 번 꺼내고 싶지 않다.매번 30개씩 뽑아주면 좋겠는데, 파티션을 클릭하면 api로 전화해서 다음 30개 제품에 전화할 거야.그러나 내 문제는 기본 페이지길이 30개 제품인데, 내가 50개 제품을 보여주는 쇼를 선택해도 페이지 목록에 30개 제품이 표시된다는 것이다(그러나 I console.log(res.data.listProduct)는 50개 제품을 표시하는데, 어떻게 기본값을 변경해야 하는가(pageLength).이걸 고칠 방법이 있을까? 아니면 내가 뭘 잘못하고 있는 걸까?조언해 주시죠.고마워요.

이것을 계산에 추가 =>

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

그리고 변화:pagination-options="paginationOptionsComputed"

참고: 실제 문제는vue-good-tableperPage를 숫자로 예상한다.만약 당신이 그것을 본다면.initializePagination여기서 확인할 수 있는 방법:

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

참조URL: https://stackoverflow.com/questions/68662478/edit-default-pagination-in-vuejs