亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vue:無法通過 API 進行分頁

Vue:無法通過 API 進行分頁

慕森王 2023-09-21 16:32:26
我正在使用 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 /srcimport 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() 函數有問題,但我似乎無法解決它。有人知道我做錯了什么嗎?太感謝了!
查看完整描述

1 回答

?
慕萊塢森

TA貢獻1810條經驗 獲得超4個贊

update `prevPage` and `nextPage` function

        prevPage () {

          this.page = this.page--;

          this.getData();

        },

        nextPage () {

          this.page = this.page++;

          this.getData();

        },


查看完整回答
反對 回復 2023-09-21
  • 1 回答
  • 0 關注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號