[Vuejs]-Vuetify pagination not cycling through on button click

0👍

pageNo is a v-model variable so it should be reactive but you are using it as a static variable that’s why it is not updating. you need to use ref to make it reactive.

Replace your script with this-

<script setup>
import { computed, ref } from "vue";
  
let pageSize = 4;
let pageNo = ref(1);
let assets = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16"];

const numPages = computed(() => {
  // calculate the number of pages we have
  return Math.ceil(assets.length / pageSize);
});

const pagedAssets = computed(() => {
  // get the start index for your paged result set.
  // The page number starts at 1 so the active item in the pagination is displayed properly.
  // However for our calculation the page number must start at (n-1)
  const startIndex = (pageNo.value - 1) * pageSize;

  // create a copy of your assets list so we don't modify the original data set
  const data = [...assets];

  // only return the data for the current page using splice
  return data.splice(startIndex, pageSize);
});
</script>

1👍

You need pageNo to be reactive, you can achieve that by making it a ref instead. You can read more about it here: https://vuejs.org/guide/essentials/reactivity-fundamentals.html

Here is a working example for your specific case: Playground

👤Mkalo

Leave a comment