无法将 news-api 分页到 Vue.js2 中的不同页面

Question

我正在尝试在我的 Vue 组件中为 newsapi.org API 创建一个简单的分页功能。

我在 created 钩子中对 API 的初始调用按预期工作，但我正在努力导航到不同的页面。

我知道还有其他可重用的分页组件，包括我在项目中使用的 vuetify，但我的需求非常简单，所以我决定自己在我的组件中手动创建它，它只有两个按钮用于导航到下一页和上一页，中间有另一个显示按钮，显示当前页码。

这是我用于分页的 Vuetify 代码...

<div class="text-xs-center">
        <v-btn fab small dark color="teal" :disabled="disabled" @click.prevent="prev()">
          <v-icon dark>mdi-chevron-left</v-icon>
        </v-btn>
        <v-btn outline fab class="title" color="white">{{ this.currentPage }}</v-btn>
        <v-btn fab small dark color="teal" @click.prevent="next()">
          <v-icon dark>mdi-chevron-right</v-icon>
        </v-btn>
      </div>

这是我获取结果的代码，也是我更改页面的函数...

computed: {
    pageCount() {
      return Math.ceil(this.totalResults / this.maxPerPage);
    },
created() {
    this.fetchNews();
  },
  methods: {
    fetchNews() {
      axios
        .get(this.apiUrl)
        .then(res => {
          this.articles = res.data.articles;
          this.totalResults = res.data.totalResults;
          console.log(res.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    next() {
      this.currentPage += 1;
      this.fetchNews();
    },
    prev() {
      this.currentPage -= 1;
      this.fetchNews();
    },

我已将页面大小设置为 9，因此每页有 9 个结果 这就是我构建 apiUrl 的方式...

apiUrl: `https://newsapi.org/v2/everything?q=real-madrid&language=en&page=${this.currentPage}&pageSize=9&apiKey=5b***********8f4aa3d63cf050b2`,

我不确定是否需要以某种方式使用我的 pageCount 来实现我想要的。提前感谢您的帮助。

Answer 1

apiUrl 必须是计算属性。

data() {
  return {
    currentPage: 1
    maxPerPage: 9,
    totalResults: 0,
  }
},
computed: {
  pageCount() {
    return Math.ceil(this.totalResults / this.maxPerPage);
  },
  isFirstPage() {
    return this.currentPage === 1
  },
  isLastPage() {
    return this.currentPage >= this.pageCount
  },
  apiUrl() {
    return `https://newsapi.org/v2/everything?q=real-madrid&language=en&page=${this.currentPage}&pageSize=${this.maxPerPage}&apiKey=5b***********8f4aa3d63cf050b2`
  },
}
methods: {
    fetchNews() {
      axios
        .get(this.apiUrl)
        .then(res => {
          this.articles = res.data.articles;
          this.totalResults = res.data.totalResults;
          console.log(res.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    next() {
      if (this.isLastPage) return
      this.currentPage += 1;
      this.fetchNews();
    },
    prev() {
      if (this.isFirstPage) return
      this.currentPage -= 1;
      this.fetchNews();
    },
},