DRF+VueJS pagination wrong number of pages - django

Question

I am trying to use DRF pagination backend and VueJs Frontend. I am trying to create pagination links but until now i only get first number. I have added PageNumberPagination to my settings.py. After articles viewset:
class ArticleViewSet(viewsets.ModelViewSet):
queryset = Article.objects.all()
lookup_field = "slug"
serializer_class = ArticleSerializer
permission_classes = [IsAuthenticated, IsAuthorOrReadOnly]
pagination_class = PageNumberPagination
I have used Bootstrap-Vue Pagination
<div class="col" id="article-list" :articles="articles" v-for="article in articles" :key="article.pk"
:per-page="perPage"
:current-page="currentPage">...</div>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="articles-list"
></b-pagination>
and VueJS script:
export default {
name: "ArticleList",
components: {
HelloWorld,
} ,
data() {
return {
articles: [],
next: null,
loadingArticles: false,
perPage: 2,
currentPage: 1,
size:2,
}
},
methods: {
getArticles() {
this.loadingArticles = true;
let url = "http://localhost:8000/api/articles";
axios.get(url)
.then(response => {
this.articles = response.data.results;
});
},
},
computed: {
rows() {
console.log(this.articles.length);
return this.articles.length;
}
},
created() {
this.getArticles();
},
};
If i check the api address in the browser, I can see the next and previous data.
{
"count": 4,
"next": "http://localhost:8000/api/articles/?page=2",
"previous": null,
"results": [...]
}
How do I change the data of total-rows to make pagination work? Thanks

Answer 1

Simply I added my next to fetching articles, I answer my question as to request, I now use vuex but VueJs is also similar:
fetchArticles (context) {
context.commit("fetchStart");
let endpoint = "articles/"
if (context.state.next) {
endpoint = context.state.next;
}
return ApiService.get(endpoint)
.then(data=>{
console.log(data);
context.commit("setArticles", data.data.results)
if (data.data.next) {
context.commit("setNext", data.data.next);
} else {
context.commit("setNext", null)
}
})
.catch((response) => {
console.log(response);
context.commit("setError", response.data.errors)
})
},
from my vuetemplate I call it for eg:
<script>
import { mapGetters, mapActions} from "vuex";
export default {
name: "Articles",
computed: {
},
methods: {
...mapActions(['articles/fetchArticles']),
getArticles() {
return this.$store.dispatch('articles/fetchArticles');
},
},
created() {
this.$store.dispatch('articles/fetchArticles').
then(() => {
this.isLoading = false;
})
}
};
</script>
and my button
<li class="page-item disabled">
<button
v-show="next"
#click="getArticles"
class="btn btn-sm btn-primary"
>Devamı...</button>
</li>