Vuejs3分页不工作错误的原因

Question

我正在尝试使用分页功能。限制为 10 页 _limit with parmas=ref 我通过将第一页指定为 1 来尝试从 axios 到 params 的分页，但没有显示数字。控制台中没有错误，只有下一个和上一个按钮存在。没有错误，所以我不知道问题出在哪里。我需要修改代码的哪一部分？

分页.vue

<template>
  <nav
    class="mt-5"
    aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
      <li
        class="page-item"
        :class="isPrevPage">
        <a
          class="page-link"
          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"
        class="page-item"
        :class="{ active: currentPage === page }">
        <a
          class="page-link"
          href="#"
          @click.prevent="$emit('page', page)">{{
            page
          }}</a>
      </li>
      <li
        class="page-item"
        :class="isNextPage">
        <a
          class="page-link"
          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 class="box">
          <tbody>
            <tr
              v-for="forms in form"
              :key="forms.id"
              style="cursor: pointer;"
              @click="NoticeDetail(forms.id)">
              <td class="td_title">
                {{ forms.title }}
              </td>
              <td class="text_center">
                {{ forms.company }}
              </td>
              <td class="text_center">
                {{ forms.company_url }}
              </td>
              <td class="text_center">
                {{ forms.location }}
              </td>
              <td class="text_right">
                {{ 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>

Answer 1

总计数已定义但从未设置。

您应该从服务器获取 totalCount 并在回调中设置。

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