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

Posted 2023-04-06 zev1n

一、问题

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

Invalid prop: type check failed for prop “value”. Expected String, Number, got Array

报错内容：Invalid prop: type check failed for prop “value”. Expected String, Number, got Array。

原因：relateuserCount在该change事件中有赋值，该属性本身是string类型，prop也是该属性。但是现在复制强制改成数组类型，但是prop并不支持prop为数组类型，prop对应值只能是string或者number。导致报错。

select 多选、远程搜索都有，参考官方示例。
如果el-option是v-for循环出来的，需要指定key，并且key值具有唯一性，不能使用index，会出问题。
如果想保留搜索结果，加reserve-keyword属性，（多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词）