Currently facing an unusual issue that I'm struggling to resolve. My goal was to include an index number in a for-each loop and calculate the total count of data within my vue.js component. While I successfully achieved this, I encountered a problem where the counter resets with each pagination page change, and items.length only reflects the data from the current pagination page. Here's what I've implemented:
<tr v-for="(item, index) in items" v-bind:key="item.id">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
</tr>
To get the total data count:
<div class="form-group">
Total data: {{items.length}}
</div>
While everything works well on the initial pagination page, switching to the second page results in the total count only reflecting the data within that specific page, with the counter starting from 1 again. For example, on the first page it shows a total of 15 data entries (out of around 300), and the indexing is correct:
https://i.sstatic.net/ZWMgx.png
But upon moving to the second page, it continues to show the same total count, with the index starting from 1 once more instead of continuing consecutively (e.g., 16, 17..)
https://i.sstatic.net/2j7HY.png
Snippet from the Vue.js component:
mounted() {
this.getStatuses();
this.getSchoolYears();
if (this.items.length == 0) {
this.loadPage(this.pagination.current_page);
this.getObjects();
}
},
methods: {
getSaveStateConfig() {
return {
'cacheKey': 'ApplicationComponent',
};
},
addFilter(key, value) {
this.filters = this.filters.filter(function (obj) {
return obj.key !== key;
});
this.pagination.current_page = 1;
this.filters.push({key: key, value: value});
},
loadPageDebounce: _.debounce(function (page, parameters) {
this.loadPage(page);
}, 500),
loadPage(page, parameters) {
var parameters = '';
this.filters.forEach(function (obj, index) {
parameters = parameters + '&' + obj.key + '=' + obj.value;
});
var $this = this;
axios({
method: 'GET',
url: '/api/applications?page=' + page + parameters,
headers: {'X-CSRF-TOKEN': window.csrfToken, 'X-Requested-With': 'XMLHttpRequest'},
})
.then(function (response) {
// console.log('resposne', response);
$this.items = response.data.data
$this.pagination.total = response.data.total;
$this.pagination.last_page = response.data.last_page;
$this.pagination.current_page = response.data.current_page;
$this.pagination.from = response.data.from;
$this.pagination.to = response.data.to;
$this.pagination.next_page_url = response.data.next_page_url;
$this.pagination.prev_page_url = response.data.prev_page_url;
})
.catch(function (error) {
console.log(error);
});
},
loadData() {
this.loadPage(this.pagination.current_page, this.filters);
},
Seeking advice on how to address this issue when using vue.js pagination. Thank you for any assistance provided.