整个项目剩下这个难以解决的报错，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

ziming007

Laravel 8.x 译者 59 声望

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

4年前评论

Sloth （楼主）

这是一个element评分组件，组件本身支持浮点型（如3.7）。我这里axios获取到了这个值是一个字符串（值有可能是1.0、2.0、3.7等），需要转为Number。

ziming007 （作者）

@Sloth 嗯嗯刚才测试了一下是支持浮点型的. 不过我这里面 toFixed() 会转化成字符串型

console.log(typeof (Number('2.9').toFixed(1)))

Vue.js

还需要在外层进行转化成整型(Number())或者浮点型(parseFloat())

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助