Nuxt•5w ago

Pagination page count not updating

I am trying to change the :total field of my UPagination component and its not updating. Here is my implementation.

<template v-if="transactionsCount > 1">
    <div class="mt-2">
      <UPagination class="" v-model="state.page" max="3" :total="transactionsCount"/>
    </div>
  </template>

<script setup lang="js">
//The amount of pages with transactions. Max 10 transactions per page.
const transactionsCount = ref(0)
//initially when the page loads, transactionsCount is set to 1 by another function.
//When a user clicks a check box, it loads 30 transactions, so transactionsCount is set to 3. The pagination is not updating.
//Looked at the values in the nuxt dev tools, all the variables are as expected. This just isn't reflecting that.
</script>

<template v-if="transactionsCount > 1">
    <div class="mt-2">
      <UPagination class="" v-model="state.page" max="3" :total="transactionsCount"/>
    </div>
  </template>

<script setup lang="js">
//The amount of pages with transactions. Max 10 transactions per page.
const transactionsCount = ref(0)
//initially when the page loads, transactionsCount is set to 1 by another function.
//When a user clicks a check box, it loads 30 transactions, so transactionsCount is set to 3. The pagination is not updating.
//Looked at the values in the nuxt dev tools, all the variables are as expected. This just isn't reflecting that.
</script>

3 Replies

kapa.ai•5w ago

Hi @BeanFeed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, I can offer some insights and suggestions regarding your pagination issue with the UPagination component in Nuxt. The UPagination component in Nuxt UI is designed to handle pagination based on the total number of items and the number of items per page. From the Nuxt UI Pagination documentation (https://ui.nuxt.com/components/pagination#usage), we can see that the component uses a v-model for the current page and a total prop for the total number of items. Your implementation looks correct in terms of using the v-model and total prop:

<UPagination class="" v-model="state.page" max="3" :total="transactionsCount"/>

<UPagination class="" v-model="state.page" max="3" :total="transactionsCount"/>

However, there are a few things to consider: 1. Reactivity: Make sure that transactionsCount is properly reactive. Since you're using ref, it should be reactive, but ensure you're updating it correctly when the transactions are loaded. 2. Page Count: The UPagination component calculates the number of pages based on the total and page-count props. By default, page-count is 10. If you want to show 10 transactions per page, you don't need to change this. However, if you want a different number of items per page, you should set the page-count prop explicitly. 3. Max Pages: You're using max="3", which limits the number of page buttons displayed. This doesn't affect the actual number of pages, just how many are shown in the UI. Here's a suggestion to modify your code:

<template v-if="transactionsCount > 1">
  <div class="mt-2">
    <UPagination 
      v-model="state.page" 
      :max="3" 
      :total="transactionsCount"
      :page-count="10"
    />
  </div>
</template>

<script setup lang="ts">
const transactionsCount = ref(0)
const state = reactive({
  page: 1
})
// Make sure to use .value when updating transactionsCount
function updateTransactions(count: number) {
  transactionsCount.value = count
}
</script>

<template v-if="transactionsCount > 1">
  <div class="mt-2">
    <UPagination 
      v-model="state.page" 
      :max="3" 
      :total="transactionsCount"
      :page-count="10"
    />
  </div>
</template>

<script setup lang="ts">
const transactionsCount = ref(0)
const state = reactive({
  page: 1
})
// Make sure to use .value when updating transactionsCount
function updateTransactions(count: number) {
  transactionsCount.value = count
}
</script>

If the pagination is still not updating after these changes, you might want to check: 1. Is the transactionsCount actually changing? You can add a watch to log changes:

watch(transactionsCount, (newValue) => {
  console.log('transactionsCount changed:', newValue)
})

watch(transactionsCount, (newValue) => {
  console.log('transactionsCount changed:', newValue)
})

2. Is the parent component re-rendering? Sometimes, issues with reactivity can be caused by the parent component not updating. If you're still facing issues after these changes, it might be helpful to create a minimal reproducible example to isolate the problem. The Nuxt UI team or the community might be able to provide more specific help with a complete example. Nuxt UI Pagination documentation (https://ui.nuxt.com/components/pagination#usage) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@396917056718766080> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

BeanFeedOP•5w ago

Kapa just rewrote what I already had. Nothing was fixed.

<script setup lang="js">
const page = ref(1)
const items = ref([1,2,3,4])
</script>

<template>
  <div>
    <UPagination v-model="page" :total="items.length"/>
  </div>

</template>

<style scoped>

</style>

<script setup lang="js">
const page = ref(1)
const items = ref([1,2,3,4])
</script>

<template>
  <div>
    <UPagination v-model="page" :total="items.length"/>
  </div>

</template>

<style scoped>

</style>

this doesn't work and this is almost the exact same as the website example Fixed my issue. Set page-count to 1

Gaming

Programming

Pagination page count not updating