发表于： 2020-07-19 22:02:54
1 1855
今日完成:
遇到问题1:
书写上一页,下一页,绑定函数后,点击后页码没有移动
原代码:
previous(){
if(this.page>1){
axios.get('/carrots-admin-ajax/a/article/search', {
params:{
//在这里即:对象中,写console.log()是无效的
page:this.page+1,
size:this.size//显示条数
}
})
.then(res=>{
this.list = res.data.data.articleList
})
}
},
请求数据,请求当前页确实加一
但是this.page+1本身这个值没有改变
只是在page赋值this.page+1运算的结果上传,全局变量this.page本身没有改变
解决:要改变可以写成
if(this.page>1){
this.page = this.page-1
axios.get('/carrots-admin-ajax/a/article/search', {
params:{
page:this.page,
size:this.size//显示条数
}
})
或者:
next(){
if(this.page<this.totalpage){
axios.get('/carrots-admin-ajax/a/article/search', {
params:{
page:this.page ++,
size:this.size//显示条数
}
})
先给重新给this.page赋值,再传入提交请求的数据,或者提交时,自加/自减,也相当于this.page自身重新赋值
遇到问题2:
提交的参数中size的值一定是this.size而不是时时更新的this.sizem
this.sizem是双向绑定的每页条数
目的是点击确定,在把它赋值给this.size,参与计算,改变显示
//size:this.sizem就同时改变了条数,如果页面不够就产生bug
//size:this.size当前条数,让两个需求不会同时运行,因数据设定产生bug
size:this.size//显示条数
注意:在数据请求,交互过程中,不应该直接绑定双向绑定实时改变的值,在有需要时,在添加
问题3:
//尾页
last(){
if(this.page<this.totalpage){
axios.get('/carrots-admin-ajax/a/article/search', {
params:{
page:this.totalpage,
size:this.size
}
})
这里点击跳转显示的是尾页,但是页码是第一页没有变
正确:把this取出给它赋值
//首页
first(){
if(this.page>1){
this.page=1
axios.get('/carrots-admin-ajax/a/article/search', {
params:{
page:this.page,//这里不变,引出赋值
size:this.size
}
})
//尾页
last(){
if(this.page<this.totalpage){
this.page=this.totalpage
axios.get('/carrots-admin-ajax/a/article/search', {
params:{
page:this.page,//这里不变,引出赋值
size:this.size
}
})
返回列表
评论