之前在写vue项目的时候,使用组件开发时出现了一个数据类型错误,当时由于时间关系没有去解决这个问题,后面有朋友也遇到了相同的问题,还不是一处,很多地方都遇到了这种数据类型的错误,如下图
![d99276812d5ae0ac701910cb01d28047.png](https://img-blog.csdnimg.cn/img_convert/d99276812d5ae0ac701910cb01d28047.png)
上面图示:给出了我们警告提示组件中想要的数据明显是Number类型,而我们给的数据确是String,产生这一现象是什么原因呢,差不多就是后端人员在设计数据库的时候,没有考虑到前端是用什么数据类型实现的这一效果,从而造成了现在这样的数据类型错误问题。
那么我们怎么去得到正确的数据类型呢,大部分人想到了使用数据类型的转换,确实是,我刚开始也想到了这样去解决,我们来看看下图
![3711f344bba93e2d1c58981f4bbc9f48.png](https://img-blog.csdnimg.cn/img_convert/3711f344bba93e2d1c58981f4bbc9f48.png)
不用看了直接报错,所以这种方法也不能解决我们的需求,怎么解决呢,我们来测试下使用计算属性,首先我们去引入elementUI中的Rate组件
![b53f077ee26ff2d96e52048c268d74b5.png](https://img-blog.csdnimg.cn/img_convert/b53f077ee26ff2d96e52048c268d74b5.png)
定义数据:以及引入Rate组件
![1d7a030eebf9fccee66932395b259454.png](https://img-blog.csdnimg.cn/img_convert/1d7a030eebf9fccee66932395b259454.png)
这时候就报了上面的错误
![77c124122998f4e2a936df07db474c14.png](https://img-blog.csdnimg.cn/img_convert/77c124122998f4e2a936df07db474c14.png)
我们尝试着使用计算属性解决
![2573a6baf68fc5efdb8f542661fc45f2.png](https://img-blog.csdnimg.cn/img_convert/2573a6baf68fc5efdb8f542661fc45f2.png)
使用计算属性我们发现能够解决问题,但是这是单个数据,如果是从后台获取到的数据,你就会发现,这样可能就解决不了问题了,那怎么解决呢,其实并不用那么复杂,我们可以在获取数据源的时候就对数据进行处理,如下图这是数据
![4d55bb5843774ec4598c16dad07fa9de.png](https://img-blog.csdnimg.cn/img_convert/4d55bb5843774ec4598c16dad07fa9de.png)
![f6eeb267204e5a858089be232ff5a45a.png](https://img-blog.csdnimg.cn/img_convert/f6eeb267204e5a858089be232ff5a45a.png)
处理后遍历结果:
![14efab572139c231438391b9e5431683.png](https://img-blog.csdnimg.cn/img_convert/14efab572139c231438391b9e5431683.png)
![90e3eb57d461543af0e717adcb3fc419.png](https://img-blog.csdnimg.cn/img_convert/90e3eb57d461543af0e717adcb3fc419.png)
总结:关于数据类型错误问题处理方式:如果得到的是单个数据: 使用计算属性处理
如果得到的是一组数据: 在得到数据源的同时对数据进行处理
![a0160ab565ac797eec1b6c044d87a759.png](https://img-blog.csdnimg.cn/img_convert/a0160ab565ac797eec1b6c044d87a759.png)