I am currently working with BootstrapVue 3 to create a component that uses a b-table. The issue I am facing is with the pagination functionality using b-pagination.
My intention was to display only 2 objects per page, but instead of that, all objects are shown on every page while creating a new page for every 2 objects.
Below is the template code for my b-table:
<template>
<b-container fluid="xl">
<div class="api-list">
<h2>API Listing</h2>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<b-table
id="my-table"
striped hover :items="items"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
</div>
</b-container>
</template>
And here is the script section:
<script>
import axios from "axios"
export default {
data() {
return {
perPage: 2,
currentPage: 1,
items: [],
}
},
computed: {
rows() {
return this.items.length
}
},
async mounted() {
try {
const url = "http://localhost:3030/get-api-list";
await axios.get(url, {
}).then((res) => {
if (res.data.length < 1) {
console.log("none found");
} else {
this.items = res.data;
}
});
} catch (e) {
console.error(e);
}
console.log(this.items);
},
}
</script>
Please note that this component needs to be imported into another component in order to view it.