Invalid return property value in Vue 3-CodePudding

I'm making pagination using Vue, it was working fine yesterday but today it encountered a bug,

I have assigned the totalPage that the api returns but it no longer accepts that value to calculate the totalPage... Here is my code:

View

<template>
  <!-- Pagination -->
        <span >
          <nav aria-label="Table navigation">
            <ul >
              <a-pagination
                v-if="!loading"
                @change="pagination"
                v-model:current="current"
                :total="totalPage"
                show-less-items
              />
            </ul>
          </nav>
        </span>
</template>

Script

<script setup lang="ts">
const totalPage = ref<number>();
const current = ref(1);
async function getFile(page = 1) {
  try {
    const fileData = await request.get("api/admin/file/list", {
      params: {
        page,
        limit: 7,
        name: searchName.value.trim(),
        status: stateStatus.value,
        mimetype: typeFile.value,
        lte_size: endSize.value,
        gte_size: startSize.value,
      },
    });
    files.value = fileData.data.data;

    totalPage.value = fileData.data.count;
    console.log("Tổng trang:",totalPage.value) //Log the correct results
    loading.value = false;
  } catch (e) {
    console.log(e);
  }
  
  onMounted(async () => {
    await getFile();
});

//Tính phân trang
async function pagination(pageNumber: number) {
  current.value = pageNumber;
    files.value = [];
    await getFile(pageNumber);
}
</script>

Hope to get help from everyone, thanks a lot

CodePudding user response：

The syntax to bind the totalPage value to the total prop of the a-pagination component looks correct. There are a few issues with your code that might be causing the problem.

totalPage variable is declared as a ref, but it is not being used as one in the pagination function. You should update the pagination function to use the totalPage variable as a ref, like this:

async function pagination(pageNumber: number) {
  current.value = pageNumber;
  files.value = [];
  await getFile(pageNumber);
  totalPage.value = fileData.data.count; // update totalPage ref here
}

Different issue is that the getFile function is not defined in the code you posted. It is not clear how it is defined or where it is imported from. You should make sure that the getFile function is defined and can be called successfully before calling it in the pagination function.

Also, it's generally a good idea to check for errors when making API requests and handling the response. You can do this by checking the fileData.data.error property in the getFile function.