Level 1
The handleCurrentChange(val) method will only update the currentPage value, you'll next to call the function to get the updated data (with currentPage) and make another call to route with different currentPage.
I'm trying to use element ui pagination with Vue JS and Laravel. It's not changing the data when I clicked next or prev. How to use it properly?
<tbody>
<tr v-for="post in posts | limitBy count offset">
<td>{{post.id}}</td>
<td>{{post.title}}</td>
<td>{{post.body | trunCate}}</td>
<td v-if="timeLang == 'en'">{{post.created_at | formatDateEn}}</td>
<td v-else-if="timeLang == 'id'">{{post.created_at | formatDateId}}</td>
<td><router-link :to="'/' + $route.params.trans + '/adminspace/' + post.post_id"><a
class="btn btn-default" >View</a></router-link></td>
</tr>
<tr v-if="!dataPost">
<td>No result</td>
</tr>
</tbody>
</table>
<div class="text-center">
<el-pagination
@current-change="handleCurrentChange"
:current-page="current_page"
:page-size="per_page"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
export default {
data()
{
return {
posts: [],
timeLang: this.$route.params.trans,
search: '',
dataPost: true,
per_page: null,
current_page: null,
total: null,
next_page_url: null,
}
},
created(){
this.fetchPost();
},
methods: {
fetchPost() {
axios.get('/' + this.$route.params.trans + '/adminGetPosts')
.then(({data}) => {
this.posts = data.data
this.current_page= data.current_page
this.per_page = data.per_page
this.total = data.total
this.next_page_url = data.next_page_url
})
},
searchPost() {
axios.get('/' + this.$route.params.trans + '/adminSearchPost?search=' + this.search)
.then(({data}) => {
this.posts = data
if(this.posts == '') {
this.dataPost = false;
} else {
this.dataPost = true;
};
})
},
handleCurrentChange(val) {
this.currentPage = val;
console.log(`current page: ${val}`);
}
}
Please or to participate in this conversation.