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

一直在学习，从未停止，终身学习。

Sloth

课程读者 57 声望

努力迈向全栈技术的大门

0 人点赞

推荐文章：

更多推荐...

博客

vite2-electron-vadmin 一款清爽UI中后台权限管理系统|Electron-Vue3后台 12 / 3 |

博客

基于 Vue2.0 开发的 Lumen IM 在线聊天应用 33 / 15 |

博客

使用Vue 3编写个人博客前台！去除第三方UI!自己编写所需UI组件！ 13 / 3 |

博客

在 vue-cli 3.0 + 里面对 axios 封装 18 / 3 |

翻译

教程：使用 Vue.js 和 Laravel 共建一个简单的 CRUD 应用 49 / 11 |

链接

请求翻译 Bootstrap-vue 的文档 14 / 2 |

讨论数量: 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

3年前评论

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())

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

帮助

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

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

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

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录