Javascript Vue:无法从API进行分页

我正在使用TMDB API（）创建一个电影网站 我想在主页上显示20部电影，然后单击“下一步”时再显示20部电影

这是我的家

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

以前的


1.


下一个


//@是/src的别名
从“../components/MovieList”导入MovieList
从“axios”导入axios
导出默认值{
组成部分：{
电影演员
},
数据：函数（）{
返回{
电影：空，
页码：1，
加载：false，
每页：20
}
},
方法：{
getData（）{
var=this
axios.get（）https://api.themoviedb.org/3/movie/now_playing?api_key=e7bb075c43180bc41bffe6004eb81113&language=en-US&page='+此.page）
.然后（功能（响应）{
this.movies=response.data.results
})
},
前页（）{
本页--
},
下一页（）{
本页++
},
最后一页（）{
让长度=this.movies.length
返回长度/this.perPage
}
},
挂载：函数（）{
这个文件名为getData（）
}
}

我猜我的getData（）函数有问题，但我似乎无法解决它。 谁知道我做错了什么？非常感谢你

update `prevPage` and `nextPage` function

prevPage（）{
this.page=this.page--；
这是getData（）；
},
下一页（）{
this.page=this.page++；
这是getData（）；
},

当用户单击下一页/prevPage之后，您没有调用getData。首先，为什么要将所有这些方法调用到mounted（）hook中？装载时，您可能只需调用getData（）。其次，我建议在prevPage（）和nextPage（）方法中添加另一行：一旦页面被更改，只需再次调用getData（）。@SaudQureshi啊，我明白了，非常感谢@谢谢您的解释，非常感谢！如果这很奇怪，我很抱歉，因为我是Vue的新手，并且仍然了解它。我以前没有用过这些方法，但后来我用过，因为我正在试验。谁知道它是否能起作用。非常抱歉，效果非常好！非常感谢你！不客气