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类型就好了。