title: VueJs: How to paginate an array items with a load more button
body: <p>I have an array of objectsand I want to show only 3 at a time with a button that when clicked,show 3 more, making 6 in total and so on.</p>
  
  <p>This is what I have currently:</p>
  
  <pre class="lang-html prettyprint-override"><code>// vue template
  &lt;ul&gt;
    &lt;li v-for="(order, index) in orders" :key="index"&gt;
      {{order.item_description}}
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;button @click="loadMore"&gt;load more &lt;/button&gt;
  </code></pre>
  
  <p>For the script, I have the data and some computed properties:</p>
  
  <pre class="lang-js prettyprint-override"><code>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
    }
  }
  }
  </code></pre>
  
  <p>My confusion is how to get the <code>orders</code> to be paginated using the <code>maxPerPage</code> and then add more using the <code>loadMore</code> </p>
  
  <p>Here is a <a href="https://codesandbox.io/s/silly-dirac-vxleo" rel="nofollow noreferrer">codesandbox</a> for demo</p>