the paging component is effective in the local environment
here is part of my code:
data() {
return {
tops: {},
news: {},
hots: {},
recommends: {},
PageSize:null,
totalPage:null,
currentPage:null,
}
},
mounted: function() {
var that = this;
this.$axios.get("/api/home/client?method=index").then(function(response) {
response = response.data;
that.tops = response.response.tops;
that.news = response.response.news.data;
that.hots = response.response.hots;
that.recommends = response.response.recs;
//
that.currentPage = parseInt(response.response.news.currentPage);
that.totalPage = parseInt(response.response.news.total);
that.PageSize = parseInt(response.response.news.per_page);
});
}
<!-- -->
<vue-paginate :PageSize="PageSize" :totalPage="totalPage" :currentPage="currentPage"></vue-paginate>
Code of the paging component:
props: {
totalPage: {
type: Number
},
PageSize: {
type: Number
},
currentPage: {
type: Number
}
},
methods: {
handleCurrentChange: function (val) {
this.$router.push({path:this.$route.path,query:{page: val}});
},
},
<el-pagination
background
layout="prev, pager, next"
:total="totalPage"
:page-size="PageSize"
:currentPage="currentPage"
@current-change="handleCurrentChange"
>
</el-pagination>
I would like to ask the bosses why the online environment of this page has no effect