整个项目剩下这个难以解决的报错,Vue.js使用element UI的评分组件el-rate下的对象转数字类型问题。

整个项目剩下这个难以解决的报错,Vue.js使用element UI的评分组件el-rate下的对象转数字类型问题。

 <el-rate
   v-model="ReviewRating"
   disabled
   show-score
   text-color="#ff9900"
   score-template="{value}"
 ></el-rate>

使用axios从后端laravel获取到结果后,提示我

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

无论如何转换都无法解决。比如
1、v-model.number="ReviewRating"无法解决;
2、v-model="Number(ReviewRating)"无法解决;
3、在data里面转化也无法解决

data() {
  return {
    reviewRatingValue: parseFloat(this.reviewRating)
  }
},

求高手告诉我如何解决这个报错,虽然不影响使用,实在不想在控制台看到一对红色的报错!!!无法容忍!

vue
一直在学习,从未停止,终身学习。
讨论数量: 1
data() {
  return {
    reviewRatingValue: parseFloat(this.reviewRating)
  }
}

parseFloat() 方法会将其转化为浮点型,但是在该组件中,会将浮点型当作字符型来处理.虽然能正常显示,但是会有一堆报错.所以,将其转化为整型即可.

我在我的项目是这样处理的:首先将后端获取的数据转化为整型,随后转化为1位小数点的浮点型,最后再转化为整型

// data部分,设置默认值时就为整型
data() {
    return {
      discussForm: {
        score_one: 5
      },
    }
  },
// 判断是否为能转化为整型,能够转化则进行处理
this.discussForm.score_one = !isNaN(Number(this.data.score_one)) ? Number(Number(this.data.score_one).toFixed(1)) : 5
3天前 评论
Sloth (楼主) 3天前
ziming007 (作者) 2天前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!