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 (i.e. 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>
