Nuxt UI分页组件实现遇阻：数据绑定问题求助

你的代码核心问题有两个：一是没有根据分页的当前页码过滤要渲染的数据，二是分页组件的参数配置不正确。以下是修复方案：

关键修改点 #

• 定义每页显示的条目数量，比如设为6条
• 通过计算属性根据当前页码page和每页条数，截取要展示的创作者数据
• 修正分页组件的page-count参数，用总数据量除以每页条数并向上取整，得到真实总页数，而不是写死7

完整修复代码 #

<template>
  <div>
    <!-- 加载状态处理（如果useCreators是异步获取数据） -->
    <div v-if="!creators.length" class="p-5 text-center">加载中...</div>
    
    <ul class="p-5" v-else>
      <li v-for="creator in paginatedCreators" :key="creator.id" class="mb-5">
        <nuxt-link :to="`/creator/${creator.slug}`">
          <div class="creatorCard" :style="{ background: `url(${creator.banner}) center center no-repeat`, backgroundSize: `100% auto` }">
            <div class="glassEffect">
              <div class="text pl-5 items-end h-1 pb-2">
                <p class="font-bold">{{ creator.label }}</p>
                <p class="italic">{{ creator.ig }}</p>
              </div>
            </div>
          </div>
        </nuxt-link>
      </li>
    </ul>

    <div class="pb-4" v-if="creators.length > perPage">
      <UPagination 
        :ui="{ wrapper: 'justify-center'}" 
        v-model="page" 
        :page-count="totalPages" 
        :total="creators.length" 
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const page = ref(1);
const perPage = ref(6); // 每页显示6条数据

const creators = useCreators();

// 计算当前页要展示的数据
const paginatedCreators = computed(() => {
  const start = (page.value - 1) * perPage.value;
  const end = start + perPage.value;
  return creators.value.slice(start, end);
});

// 计算总页数
const totalPages = computed(() => Math.ceil(creators.value.length / perPage.value));

useHead({
  title: 'Creators',
})
</script>

额外说明 #

• 如果useCreators()是异步获取数据（比如从API请求），要确保它返回的是响应式数组（比如用useAsyncData或者直接返回ref），否则分页计算不会自动更新
• 可以根据需求调整perPage的值，比如改成8或10，总页数会自动计算
• 当总数据量小于等于每页条数时，分页组件会自动隐藏，避免不必要的显示

内容的提问来源于stack exchange，提问作者milonovich