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;
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|