Vuetify的pagination功能踩坑

Posted 2021-02-22 exigeslover

有关于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这样的