DRF+VueJS分页错误的页数。

Question

我正在尝试使用 DRF 分页后台和 VueJs Frontend. 我试图创建分页链接，但直到现在我只得到第一个数字。我已经添加了 PageNumberPagination 对我 settings.py. 文章之后 viewset:

class ArticleViewSet(viewsets.ModelViewSet):
    queryset = Article.objects.all()
    lookup_field = "slug"
    serializer_class = ArticleSerializer
    permission_classes = [IsAuthenticated, IsAuthorOrReadOnly]
    pagination_class = PageNumberPagination

我已经使用了 Bootstrap-Vue 分页

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

和 VueJS 脚本。

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();
    },
};

如果我在浏览器中查看api地址，我可以看到下一个和上一个数据。

{
    "count": 4,
    "next": "http://localhost:8000/api/articles/?page=2",
    "previous": null,
    "results": [...]
}

我如何改变总行的数据来使分页工作？谢谢，谢谢

Answer 1

简单地说，我添加了我的下一个获取文章，我回答我的问题，因为请求，我现在使用vuex，但VueJs也是类似的。

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)
      })
  },

从我的vuetemplate中，我调用它，例如：

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

和我的按钮

      <li class="page-item disabled">
            <button
            v-show="next"
            @click="getArticles"
            class="btn btn-sm btn-primary"
        >Devamı...</button>
        </li>