Struggling to integrate pagination in vue. Facing an issue where the pagination links are appearing as dots, depicted in the attached image. The correct number of pagination links display and I can navigate through different pages using the side navigation arrows on the pagination links (<,>). Uncertain about what's causing this error. Assistance in resolving this problem is greatly appreciated.
https://i.stack.imgur.com/3WqOa.png
<template>
<v-app class="abilities">
<v-data-table
:headers="headers"
:items="users"
hide-actions
class="user-table"
v-bind:pagination.sync="pagination"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.date }}</td>
<td>{{ props.item.description }}</td>
</template>
<template slot="no-data" >
<v-alert id='no-data' :value="true" color="error" icon="warning">
No User Yet
</v-alert>
</template>
</v-data-table>
<v-layout row wrap v-if="this.users.length > 5">
<v-flex xs12>
<div class="user-pagination">
<v-pagination v-model="pagination.page" :length="pages"></v-pagination>
</div>
</v-flex>
</v-layout>
</v-app>
</template>
<script>
export default {
data: function() {
return {
pagination: {
rowsPerPage: 5,
page: 1
},
headers: [
{
text: 'Date',
sortable: false,
value: 'name'
},
{
text: 'Description',
sortable: false,
value: 'name'
},
],
users: [],
};
},
created: function() {
var that = this;
this.fetchUsers();
},
computed: {
pages () {
return this.pagination.rowsPerPage ? Math.ceil(this.users.length / this.pagination.rowsPerPage) : 0
}
},
methods: {
fetchUsers() {
var url = '/users.json?';
this.$axios
.get(url)
.then(response => {
let data = response.data;
let users = [];
data.map((user, index) => {
let expandedData = user;
users.push(expandedData)
});
this.users = users;
});
}
}
};
</script>