Vue-Paginate数组清空后重新赋值无法显示内容的问题排查

看起来你遇到的问题是vue-paginate组件在绑定的数组从空值恢复为有数据时，没有自动重置到有效页码，导致页面无法渲染内容。通过你提到的开发者工具信息——currentPage为-1，pageItemsCount显示异常，这印证了这个问题：组件停留在了一个无效的页码位置，即使数组重新有数据，也无法正确计算分页内容。

问题原因 #

当recipes数组被清空时，vue-paginate内部会将当前页码调整到一个超出有效范围的值（比如-1）。而当数组重新被赋值有内容的数组时，组件并没有自动将页码重置回有效范围（比如第1页），因此无法加载对应页码的分页数据，页面自然显示为空。

解决方案：手动监听数组变化，重置页码 #

我们可以通过给paginate组件添加ref，监听recipes数组的长度变化，当数组从空变为有内容时，手动调用组件的goToPage方法重置到第1页。

步骤1：给paginate组件添加ref

修改你的模板代码，给<paginate>标签加上ref属性：

<paginate 
  ref="recipesPaginate"
  name="recipes" 
  :list="recipes" 
  :per="16" 
  class="p-0"
>
  <transition-group name="zoom">
    <div v-for="recipe in paginated('recipes')" :key="recipe.id">
      <recipe class="" :recipe="recipe" :ref="recipe.id"></recipe>
    </div>
  </transition-group>
</paginate>

步骤2：监听数组变化，重置页码

在组件的watch选项中监听recipes数组的变化，当数组恢复有内容时，重置分页到第1页：

export default {
  // ...你的其他组件配置（data、methods等）
  watch: {
    recipes(newRecipes) {
      // 确保组件实例存在，且新数组有内容
      if (newRecipes.length > 0 && this.$refs.recipesPaginate) {
        // 强制跳转到第1页
        this.$refs.recipesPaginate.goToPage(1);
      }
    }
  }
}

替代方案：在更新数组时手动重置 #

如果你是在特定方法（比如搜索方法）中更新recipes数组，也可以直接在更新后判断并重置页码：

methods: {
  handleSearch(query) {
    // 模拟获取搜索结果的逻辑
    const searchResults = this.fetchRecipes(query);
    this.recipes = searchResults;
    
    // 当结果有内容时，重置分页到第1页
    if (searchResults.length > 0 && this.$refs.recipesPaginate) {
      this.$refs.recipesPaginate.goToPage(1);
    }
  }
}

验证效果 #

修改完成后，当你输入"bx"清空数组，再退格回"b"时，组件会自动跳转到第1页，此时currentPage会恢复为1，pageItemsCount显示正常，页面也能正确渲染出所有符合条件的recipe内容。

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