As a developer, I am currently utilizing Element-UI to speed up the development process of my applications. One feature I want to implement is pagination as a reusable child component within any parent component in order to decrease the overall app size.
For instance, let's consider a parent component with 'inline' pagination.
parent.vue
<template>
<ol>
<li v-for="student in studentList>{{ student.full_name }}</li>
</ol>
<el-pagination
layout="sizes, prev, pager, next"
:total="totalPages"
:page-size="pageSize"
:page-sizes="[10, 25, 50, 100]"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</template>
<script>
export default {
data () {
return {
pageSize: 10,
currentPage: 1,
students: [] // this filled from backend when component created
}
},
created () {
// Axios HTTP request to fetch data from server
// to filled students variable
},
computed: {
totalPages () {
return this.students.length
},
studentList () {
return this.students.slice(((this.currentPage - 1) * this.pageSize), (this.pageSize * this.currentPage))
}
},
methods: {
handleSizeChange (size) {
this.pageSize = size
},
handleCurrentChange (value) {
this.currentPage = value
}
}
}
</script>
While this method works effectively, it can be tedious having to replicate it in every component that requires pagination. Does anyone have an example of how to create this pagination as a child component while keeping the collections in the parent component?
I've attempted to create a child component but struggled with passing the returned value from a computed property to the parent component.
Take for example my unsuccessful attempt at creating a child component:
child.vue
... // all template elements and functions
computed: {
studentList () {}
},
methods: {
updateStudentList () {
this.$emit('changed-value', this.studentList) // where studentList is a computed function similar to the one in the parent code above
}
}
parent.vue
// there's no longer a studentList function in the computed property of the parent component
// instead, it has been moved to the child component
<li v-for="student in students">{{ student.full_name }}</li>
<child-pagination v-on:changed-value="rebuildStudent"></child-pagination>
...
methods: {
rebuildStudent (newCollection) {
this.students = newCollection
}
}