Vue：无法通过 API 进行分页

Question

我正在使用 TMDB API ( https://developers.themoviedb.org/3/movies ) 创建一个电影网站，我想在主页中显示 20 部电影，然后在单击“下一步”时显示另外 20 部电影。

这是我的 Home.vue

<template>

  <div class="home">

    <MovieList v-bind:movies="movies" :showMovies="showMovies"/>

    <div class="my-4"> <!-- Pagination -->

      <ul class="pagination pagination-md justify-content-center text-center">

            <li class="page-item" :class="page === 1 ? 'disabled' : ''">

              <a class="page-link" @click="prevPage">Previous</a>

            </li>

            <li class="page-link" style="background-color: inherit">

                1

            </li>

            <li class="page-item" :class="page === lastPage ? 'disabled' : ''">

              <a class="page-link" @click="nextPage">Next</a>

            </li>

          </ul>

    </div>

  </div>

</template>

<script>

// @ is an alias to /src

import MovieList from '../components/MovieList'

import axios from 'axios'

export default {

  components: {

    MovieList

  },

  data: function() {

        return {

            movies : null,

            page: 1,

            loading: false,

            perPage: 20

        }

    },

    methods: {

        getData() {

            var that = this

            axios.get('https://api.themoviedb.org/3/movie/now_playing?api_key=e7bb075c43180bc41bffe6004eb81113&language=en-US&page=' + this.page)

                 .then(function(response) {

                    that.movies = response.data.results

                })

        },

        prevPage () {

            this.page--

        },

        nextPage () {

            this.page++

        },

        lastPage () {

            let length = this.movies.length 

            return length / this.perPage

        }

    },

    mounted: function () {

        this.getData()

    }

}

</script>

我猜我的 getData() 函数有问题，但我似乎无法解决它。有人知道我做错了什么吗？太感谢了！

Answer 1

update `prevPage` and `nextPage` function&nbsp; &nbsp; &nbsp; &nbsp; prevPage () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.page = this.page--;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.getData();&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; nextPage () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.page = this.page++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.getData();&nbsp; &nbsp; &nbsp; &nbsp; },