有关于vuetify的v-pagination探究

主要是里面的:length属性

纯写数字可以,但是不能进行任何数学操作

倒不会影响ui,但是会报错,invalid prop

这里我的分页是这么写的

<v-pagination v-model="currentPage" :length="houses.length/3+1" @input="pageChange">

</v-pagination>

 

相当于houses是一个数组,取houses数组长度为三分之一然后加一,得到多少个页标

  

 

 

 

然后爆出这样的warning,虽然不影响使用,但是每点一次就出现,好烦人

不得已先给了个常量

这里直接给houses.length是可以的,也就是变量是允许的,常量也是允许的,但是数学操作就是禁止的

 

当然之后的解决措施就是从后端直接传回列表的size()/3+1当成分页数据

也就是传回一个Map<String,Object>

之后前端接受的json格式就如下:

{

  “pagination”:3,

  “houses”:[

    {

      ….

    }

  ]

}

 

这也同样让我加深理解了前后端分离的思想,前端不会做很多的数值操作,逻辑判断也仅仅是ui层面的针对用户操作的反馈,后端才是处理数据的根源

且提交的数据还是用Map<String,Object>比较好,之后会把接口都改一下,有些接口之前图省事直接就返回list了,感觉还是统一一下
这样axios得到的是有明确意义的对象,如res.data.houses,res.data.pagination这样的

posted on 2020-04-24 12:17  寺川愛美  阅读(2121)  评论(0编辑  收藏  举报