使用 Nuxt UI 进行分页

Question

我正在尝试从 Nuxt UI 实现分页组件，但我无法使其工作..

我尝试阅读文档和 youtube，但没有找到任何内容。我不明白如何将我的数据绑定到组件。

<template>
        <div>
            <ul class="p-5">
            <li v-for="creator in creators" class="mb-5">
                <nuxt-link
                :key="creator.id"
                :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">
        <UPagination :ui="{ wrapper: 'justify-center'}" v-model="page" :page-count="7" :total="creators.length" />
    </div>
</div>
</template>


<script setup lang="ts">
const page = ref(1);

const creators = useCreators();

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

Answer 1

将数据元绑定到组件道具上，并在

@click

上使用

<UPagination>

事件，并使用

v-model

更新数据，从组件读取值。

这是一个非常基本的实现：

<UPagination 
  :ui="{ wrapper: 'justify-center'}" 
  v-model="page" 
  :page-count="meta.per_page" 
  :total="meta.total"
  @click="update"
/>

const page = ref(1);
const creators = useCreators(page.value);
        
function update(){
  const creators = useCreators(page.value);
}