Vue.js pagination component

Question

I am trying to make a general use Vue.JS component that performs pagination through AJAX calls. I want the data that the component uses (ie list of items) to be encapsulated by the component and that only the AJAX URL be passed to the component through Vue.JS Props. I am using SLOTs to populate the component template including the iteration part.. I think this means that parent (the caller) needs to have access to the binded variables during the iteration, because the caller is looping through the items.. I cant put the looping part in the component because the component becomes specific to one type of list, and it wont be a general one anymore.

How can I make the component iterate through the items even when SLOTs are being used.. or at least allow the parent to iterate through the items but pass the data to the component so that it can fetch the next pages and update the parent's data.

To illustrate better see the following code:

// my component
Vue.component('pagination', {
  template: '#pagination-component',
  props:  {
   // the URL for ajax calls is passed from parent to component
   source: {
      type: String,
      required: true
    }
 },
  data: function () {
    // access the data being paginated somehow
    return data;
  },

  created: 
     function () {
    console.log("component loaded...");
    this.getNextPage();
    },
  methods: 
  {
    getNextPage: function () {
          console.log("getNextPage called...");
          // call ajax method and populate the binded data 
    },
    getPrevPage: function () {
          console.log("getPrevPage called...");
          // call ajax method and populate the binded data    
    }
  }
})

console.log("javascript loaded...");


var app = new Vue({
     el: '#wrapper',
data: {    
}
})

my component layout is:

<script type="text/x-template" id="pagination-component">

<div class="pagination-wrapper">

<slot name="header"></slot>

<slot name="table">default text: Please define the table in parent!</slot>

<div class="well"> 
    <a href="#" @click="getPrevPage">Previous Page</a> | 
   <a href="#" @click="getNextPage">Next Page</a>
</div>

<slot name="footer"></slot>

</div>
</script>

and my main page (parent) using the component is:

<div class="table-wrapper" slot="table">

    <table class='table'>

         <tr>
             <th>Username</th>
             <th>First name</th>
             <th>Last name</th>
             <th>E-mail</th>
        </tr>

        <tr v-for="user in users">
          <td>
          <a :href="user.id">{{user.username}}</a>
          </td>
          <td>{{user.firstname}}</td>
          <td>{{user.lastname}}</td>
          <td>{{user.email}}</td>
        </tr>

    </table>

</div>

Answer 1

I realise it's tempting to have a paginator deal with fetching data, but I think the best approach is to have the paginator be completely decoupled from the data it is paginating.

So, the parent should pass through the maximum number of pages and the paginator component should emit the page number back to the parent which should then deal with obtaining the data based on that page number. This means that you can develop different pagination components that utilise the paginator without having to create one complex component.

I did actually write something a few months back that takes this approach which you are welcome to look at on my GitHub Page , although this particular component isn't stable, but it should give you an idea of what I mean.