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
Source:stackexchange.com