64 lines
1.7 KiB
JavaScript
64 lines
1.7 KiB
JavaScript
/* Be aware that component extension is not as classes inheritance.
|
||
In this case, Vue merges both the parent and child component options creating a new mixed object.
|
||
For the case of the mounted and destroyed hook, both the parent’s and children’s are kept and they
|
||
will be called in inheritance order, from parent to children.
|
||
|
||
https://vueschool.io/articles/vuejs-tutorials/reusing-logic-in-vue-components/
|
||
*/
|
||
|
||
/* hooks order
|
||
1) extension
|
||
2) mixins
|
||
3) component
|
||
*/
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
sorting: {
|
||
sortby: "created",
|
||
sortorder: undefined, // asc || none
|
||
},
|
||
pagination: {
|
||
pages: 0,
|
||
total: 0,
|
||
page: 1,
|
||
offset: 0, // page * per_page
|
||
limit: 10, //per_page
|
||
},
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
resetPagination() {
|
||
this.pagination = {
|
||
pages: 0,
|
||
total: 0,
|
||
page: 1,
|
||
offset: 0,
|
||
limit: 10,
|
||
};
|
||
},
|
||
pageChanged(paging) {
|
||
let page = paging.pageNumber;
|
||
page -= 1;
|
||
this.pagination.offset = page * paging.limit;
|
||
this.pagination.limit = paging.limit;
|
||
this.pagination.page = paging.pageNumber;
|
||
|
||
},
|
||
pageLimitChanged(paging) {
|
||
this.resetPagination();
|
||
this.pagination.limit = paging.limit;
|
||
|
||
},
|
||
sortChanged(sorting) {
|
||
// keep limit status.
|
||
// reset page and offset values.
|
||
this.pagination.page = this.pagination.offset = 0;
|
||
this.sorting = sorting;
|
||
|
||
},
|
||
},
|
||
}; |