Advertisements

I am having trouble implementing Veutify’s pagination component to cycle through my array.

```
<template>
<div class="grid grid-cols-4 gap-5">
<div v-for="(item, index) in pagedAssets" :key="`asset_index_${index}`">
{{ item }}
</div>
<v-pagination
v-model="pageNo"
:length="numPages"
></v-pagination>
</div>
</template>
```

```
<script setup>
let pageSize = 4;
let pageNo = 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 - 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>
```

I am expecting when cycling through that the items will update.

### >Solution :

`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>
```