我一直在开发一个新闻应用程序，使用Vue 3和News API。我目前正在开发“加载更多（文章）”功能。
文章的初始数量是24，如果文章的总数大于当前文章的数量，则在页面底部有一个带有文本“加载更多文章”的按钮。
在src\components\ArticleList.vue中，我有：

<template>
  <div v-if="articles && articles.length" class="row">
    <div
      v-for="article in articles"
      :key="article._id"
      class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"
    >
      <ArticleCard :article="article" />
    </div>
    
    <div v-show="isMore" class="mb-3 text-center">
      <LoadMoreButton @load-more="loadMore" text="Load more articles" />
    </div>
  </div>
  <p v-if="totalResults == 0" class="text-center">No articles to display</p>
</template>

<script>
import ArticleCard from "./ArticleCard.vue";
import LoadMoreButton from "./LoadMoreButton.vue";

export default {
  name: "NewsList",
  components: { ArticleCard, LoadMoreButton },

  props: {
    whatToShow: {
      type: String,
      required: true,
    },

    searchString: {
      type: String,
      required: true,
      default: "",
    },
  },

  data: () => ({
    language: "en",
    page_size: 24,
    current_page: 1,
    totalResults: 1,
    articles: [],
  }),

  mounted() {
    this.getArticles();
  },

  watch: {
    whatToShow() {
      this.getArticles();
    },

    searchString() {
      this.getArticles();
    },
  },

  computed: {
    isMore() {
      // Check if the total number of pages is grater then the current page
      let totalPages = Math.ceil(this.totalResults / this.page_size);
      return totalPages > this.current_page;
    },
  },

  methods: {
    getArticles() {
      const endpoint = `${process.env.VUE_APP_API_URL}/${this.whatToShow}?q=${this.searchString}&language=${this.language}&pageSize=${this.page_size}&page=${this.current_page}&apiKey=${process.env.VUE_APP_API_KEY}`;

      this.$axios
        .get(endpoint)
        .then((response) => {
          this.totalResults = response.data.totalResults;
          this.articles = [...this.articles, ...response.data.articles];
        })
        .catch((err) => console.log(err));
    },

    loadMore() {
      if (this.isMore) {
        this.current_page++;
        this.getArticles();
      }
    },
  },
};
</script>

字符串
在src\components\LoadMoreButton.vue中，我有：

<template>
  <button class="btn btn-md btn-success" @click="$emit('load-more')">
    {{ text }}
  </button>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "LoadMoreButton",

  props: {
    text: {
      type: String,
      required: false,
      default: "Load more",
    },
  },
});
</script>

型
我使用isMore计算属性（Boolean）来隐藏按钮的容器，如果没有更多的文章要加载的话。
但是，在最后一次点击LoadMoreButton之后，* 在 * 它消失之前，* 没有加载任何其他文章 。
响应中的 * 错误代码 * 是“maximumResultsReached”。
有一个沙盒*HERE**所有的代码。
我做错了什么？解决此问题最可靠的方法是什么？