invalidpropertyvalue（Invalid prop: type check failed for prop “total“. Expected Number with value x, got String with valu）

一    
    
    
    
、问题

在做vue项目分页功能中    
    
    
   ，出现了Invalid prop: type check failed for prop “total    
    
    
   ”. Expected Number with value x, got String with value "x"的类型转换问题    
    
    
    
。

———————————————————————————————

二


     


     


     


   、原代码展示

1
 




 




 




 

、前端代码如下： <template> <div> <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage" :page-size="pageSize" :total="total" > </el-pagination> </div> </template> export default { data() { return { //分页参数 currentPage: 1, pageSize: 5, total: 0, //省略其他 } }, methods: { // 分页查询 page() { let params = { currentPage: this.currentPage, pageSize: this.pageSize }; // let config = { headers: { token: sessionStorage.getItem("token") } }; this.$axios .get("http://localhost:8888/policy/page", { params: params }) .then((response) => { if (response.status === 200) { if (response.data.code === 200) { console.log(response.data.data); this.datas = response.data.data.records;//数据列表 this.total = response.data.data.total;//总页数 } else { this.$message.error(response.data.data.message); } } }).catch((error) => { console.log(error); this.$message.error("查询失败,请重新尝试"); }) }, //省略其他 } 2   

   

   

   

、后端代码如下： /** * 统一返回通用类 * <p>包含 records 

     

     

     

  、total

  




  




  




  
、size  


  


  


  


、pages  
     
     
     
 、current */ @Data public static class CommonPage<DTO> { private List<DTO> records = new ArrayList<>(); private Long total; private Long size; private Long pages; private Long current; } 后端total定义为Long类型     


     


     


     

，前端接收的total也是number类型




 




 




 




，为什么会报错？ 后来发现
   

   

   

  ，后端发送的参数都是string类型     

     

     

     
，并不是number类型


     


     


     


   。 { "records": "Array(5)", "total": "6", "size": "5", "pages": "2", "current": "1" }

———————————————————————————————

三


   




   




   




   、解决方案

1 



 



 



 



、前端接收参数时 




  




  




  




，进行类型转换

  


  


  


 ，代码如下： this.$axios.get("http://localhost:8888/policy/page", { params: params }) .then((response) => { if (response.status === 200) { if (response.data.code === 200) { console.log(response.data.data); this.datas = response.data.data.records;//数据列表 //修改此处即可 this.total = response.data.data.total - 0;//总页数 } else { this.$message.error(response.data.data.message); } } } 2                  、后端修改数据类型     
     
     
     ，代码如下： /** * 统一返回通用类 * <p>包含 records



    




    




    




    、total


















、size                   、pages



     



     



     



    、current */ @Data public static class CommonPage<DTO> { private List<DTO> records = new ArrayList<>(); //修改 Long -> long 即可 private long total; private long size; private long pages; private long current; }

———————————————————————————————

四

















、反思

做个简单测试  




   




   




   




，查看后端所有数据类型返回的json格式是什么类型 1    
    
    
    
、演示代码如下： @Data public class R { public Double aDouble = 1.10; private double bDouble = 1.10;; private Float aFloat = 1.10f; private float bFloat = 1.10f;; private Long aLong = 10L; private long bLong = 10L; private Integer AInteger = 10; private int bInteger = 10; private Boolean aBoolean = false; private boolean bBoolean = false; private String str = "a"; private char aChar = a; } @CrossOrigin @RestController public class TestController { @GetMapping("/test") public R test(){ return new R(); } } 2


     


     


     


   、发送请求 http://localhost:8888/test 3
 




 




 




 

、实际返回结果如下： { "aDouble": 1.1, "str": "a", "aboolean": false, "along": "10", "bfloat": 1.1, "ainteger": 10, "bboolean": false, "bdouble": 1.1, "adouble": 1.1, "achar": "a", "blong": 10, "afloat": 1.1, "binteger": 10 } 可以发现只有String   

   

   

   

、char 

     

     

     

  、Long类型返回给前端的json格式是string类型


 



 



 



，所以想要number类型的以后不要定义为Long类型就好了
 




 




 




 

。