I'm trying to use the pagination feature. limit to 10 pages _limit with parmas=ref I tried pagination from axios to params by specifying the first page as 1, but the number is not displayed. There are no errors in the console, only the next and previous buttons exist. There are no errors, so I don't know where the problem is. What part of my code do I need to modify?

pagination.vue

<template>
  <nav
    
    aria-label="Page navigation example">
    <ul >
      <li
        
        :>
        <a
          
          href="#"
          aria-label="Previous"
          @click.prevent="$emit('page', currentPage - 1)">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li
        v-for="page in pageCount"
        :key="page"
        
        :>
        <a
          
          href="#"
          @click.prevent="$emit('page', page)">{{
            page
          }}</a>
      </li>
      <li
        
        :>
        <a
          
          href="#"
          aria-label="Next"
          @click.prevent="$emit('page', currentPage   1)">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  currentPage: {
    type: Number,
    required: true,
  },
  pageCount: {
    type: Number,
    required: true,
  },
})
defineEmits(['page'])
const isPrevPage = computed(() => ({ disabled: !(props.currentPage > 1) }))
const isNextPage = computed(() => ({
  disabled: !(props.currentPage < props.pageCount),
}))
</script>

<style lang="scss" scoped></style>

boardlist.vue

<template>
  <div>
        <table >
          <tbody>
            <tr
              v-for="forms in form"
              :key="forms.id"
              style="cursor: pointer;"
              @click="NoticeDetail(forms.id)">
              <td >
                {{ forms.title }}
              </td>
              <td >
                {{ forms.company }}
              </td>
              <td >
                {{ forms.company_url }}
              </td>
              <td >
                {{ forms.location }}
              </td>
              <td >
                {{ forms.date_posted }}
              </td>
            </tr>
          </tbody>
          <AppPagination
            :current-page="params._page"
            :page-count="pageCount"
            @page="page => (params._page = page)" />
        </table>
      </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import Sidebar from '~/components/Sidebar.vue'
import { ref,computed,watchEffect } from 'vue'
import axios from 'axios'
import AppPagination from '~/components/AppPagination.vue'


const router = useRouter()
const form = ref([])
const params = ref({
  _page: 1,
  _limit: 10,
})
const totalCount = ref(0)
const pageCount = computed(() =>
  Math.ceil(totalCount.value / params.value._limit),
)

const username = sessionStorage.getItem('user')

const fetchPosts = async (params) =>{
  console.log(params)
  axios.get('http://127.0.0.1:8000/jobs/all', {
    params: {
      params
    }
  })
.then((res)=>{
  console.log(res.data)
  form.value = res.data
  
})
}
watchEffect(fetchPosts)
const NoticeWrite = () => {
  router.push({
    path: '/service_center/notice/notice_create',
  }) 
}

const NoticeDetail = id => {
  console.log(id)
  router.push({
    name: 'noticedetail',
    params: {
      id
    }
  }) 
}
</script>

CodePudding user response：

Total count is defined but never set.

You should get totalCount from server and set in callback.

const fetchPosts = async(params) => {
  console.log(params);
  axios.get('http://127.0.0.1:8000/jobs/all', {
    params: {
      params,
    },
  })
  .then((res) => {
    console.log(res.data);
    // res.data should have totalCount and noticeList.
    const { totalCount, noticeList } = res.data;
    form.value = noticeList;
    totalCount.value = totalCount;
  });
};

*** edited

Your result of jobs/all API looks like only have notice list data.

if you want make pagination, your api result should have both of data and totalCount (data should be limited data of current page)

my code is just sample, so you need to modify your api to return object of pagination info

// result of 'http://127.0.0.1:8000/jobs/all'
{
  noticeData: [{title: '', company:'', ...}], // length of page limit
  totalCount: 100,
  currentPage: 1, // not required
}