Vue分页组件仅显示第一页且报pageCount缺失警告求助

问题描述 #

使用VuejsPaginateNext实现分页组件时，无论总数据量多少，始终只显示第一页。已通过控制台确认计算属性getPageCount能返回正确总页数，但控制台持续弹出警告提示缺少pageCount属性。

相关代码 #

分页组件代码（原错误写法）

<paginate v-if="searchResults.length >0" class="m-2">
        :page-count="getPageCount"
        :page-range="3"
        :margin-pages="1"
        :click-handler="clickCallback"
        :prev-text="'Prev'"
        :next-text="'Next'"
        :container-class="'pagination'"
        :page-class="'page-item'"
        :active-class="'currentPage'">
      </paginate>

JavaScript逻辑

data() {
    return {
      searchTerm: '',
      searchResults: [],
      perPage:3,
      currentPage: 1
    };
  },
  components: {
    paginate: VuejsPaginateNext,
  },
  computed: {
    // 根据页码返回对应数据
    getItems:function() {
      let current = this.currentPage * this.perPage;
      let start = current - this.perPage;
      return this.searchResults.slice(start, current);
    },
    // 根据总数据量计算总页数
    getPageCount:function() {
      return Math.ceil(this.searchResults.length / this.perPage);
    }
  },
  methods: {
    clickCallback: function(pageNum) {
      this.currentPage = Number(pageNum);
    },
    search(searchTerm) {
      const lowerCaseTerm = searchTerm.toLowerCase();
      const searchWords = lowerCaseTerm.split(/\s+/); // 按空格拆分关键词
      const query = searchWords.join('+');
      const url = `https://openlibrary.org/search.json?title=${query}`;

      fetch(url)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          this.searchResults = data.docs; // 假设API返回的结果在'docs'数组中
        })
        .catch(error => {
          console.error('Error fetching search results:', error);
        });
    }
  }

问题原因 #

核心错误是所有分页组件的props属性被写在了<paginate>标签的内部内容区域，而非标签的属性位置。Vue组件无法识别这种写法的props，导致pageCount等关键属性未被正确传递，分页逻辑完全失效。

修复方案 #

将所有props属性移至<paginate>起始标签内，同时优化字符串类型props的写法（无需额外单引号包裹）：

<paginate 
  v-if="searchResults.length > 0" 
  class="m-2"
  :page-count="getPageCount"
  :page-range="3"
  :margin-pages="1"
  :click-handler="clickCallback"
  prev-text="Prev"
  next-text="Next"
  container-class="pagination"
  page-class="page-item"
  active-class="currentPage"
></paginate>

额外验证点 #

确保页面渲染的是getItems计算属性返回的当前页数据，而非全部searchResults，例如：

<div v-for="item in getItems" :key="item.key">{{ item.title }}</div>

内容的提问来源于stack exchange，提问作者kriloots