VueJs：如何使用加载更多按钮对数组项进行分页

Posted 2023-02-22

【中文标题】VueJs：如何使用加载更多按钮对数组项进行分页

【英文标题】：VueJs: How to paginate an array items with a load more button

【发布时间】：2020-09-27 05:32:06

【问题描述】：

我有一个对象数组，我想一次只显示 3 个，点击一个按钮，再显示 3 个，总共显示 6 个，依此类推。

这是我目前拥有的：

// vue template
<ul>
  <li v-for="(order, index) in orders" :key="index">
    order.item_description
  </li>
</ul>
<button @click="loadMore">load more </button>

对于脚本，我有数据和一些计算属性：

data() 
  return 
    orders: [
      
        id: 1,
        item_description: "One",
        created_at: "23, Dec 2019",
        delivery_address: "Location",
        cost: "2500"
      ,
      
        id: 2,
        item_description: "Two",
        created_at: "23, Dec 2019",
        delivery_address: "Location",
        cost: "2500"
      ,
      
        id: 3,
        item_description: "Three",
        created_at: "23, Dec 2019",
        delivery_address: "Location",
        cost: "2500"
      
      // .... upto 12 items
    ],
    currentPage: 1,
    maxPerPage: 3
  
,
computed: 
  totalResults() 
    return Object.keys(this.orders).length
  ,
  pageCount() 
    return Math.ceil(this.totalResults / this.maxPerPage)
  ,
  pageOffest() 
    return this.maxPerPage * this.currentPage
  
,
methods: 
  loadMore() 
    this.currentPage += 1
  

我的困惑是如何使用maxPerPage 对orders 进行分页，然后使用loadMore 添加更多内容

这是一个codesandbox 用于演示

【问题讨论】：

你的密码箱好像坏了，你能修一下吗？

@ZecKa 我已经修好了 :)

您是否使用 api 加载更多项目？

@Ifaruki 不，我正在从订单数组中加载更多内容

【参考方案1】：

您可以添加计算属性，例如：

paginatedOrders() 
   return this.orders.slice(0, this.currentPage * this.maxPerPage);

然后用这个属性创建你的循环：

<li v-for="(order, index) in paginatedOrders" :key="index">order.item_description</li>

如果您已经显示所有项目，您还可以隐藏阅读更多按钮

<button @click="loadMore" v-if="currentPage * maxPerPage < orders.length">load more</button>

查看codesandbox

注意：请记住，“加载更多”按钮最常见的用途是通过 api 调用或 ajax 请求加载其他项目。这仅在您预先加载所有订单时才有效。