Invalid prop: type check failed for prop "radius". Expected Number, got String.

﹏ヽ暗。殇╰゛Y 2022-05-23 13:10 160阅读 0赞

在vue编写的项目中，在浏览器的console报错：

Invalid prop: type check failed for prop "radius". Expected Number, got String.

如下图所示：

![20180609152645979][]

在子组件progress-circle.vue的template中的定义如下：

<svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg>

在子组件progress-circle.vue的script中的props实现那个定义如下：radius和percent都是从父组件传递过来的数据

props: {
        radius: {
          type: Number,
          default: 100
        },
        percent: {
          type: Number,
          default: 0
        }
      }

父组件player.vue中引用progress-circle子组件

<progress-circle radius="32" :percent="percent">

然后就包上面的错误了。

**分析**：由于radius是从父组件传递给子组件的数据，在父组件中定义的时候是直接定义一个变量而不是绑定一个变量，那么当传递给子组件 的时候这个变量的值是一个字符串。但是在子组件中radius的类型是number，因此该变量应该还是要绑定传给子组件的。

**解决的方法：**只需要在父组件player.vue中做改变，在父组件中的定义如下

<progress-circle :radius="radius" :percent="percent">

在player.vue的data中定义一个变量radius,如下所示

data() {
        return {
          //防止快速点击造成的bug
          songReady: false,
          currentTime: 0,
          radius: 32
        }
      }

[20180609152645979]: /images/20220523/ba12b39aab97433d80eee729582d7a19.png

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 Invalid prop: type check failed for prop "round". Expected Boolean, got String with value "true".

【警告⚠️】Invalid prop: type check failed for prop "round". Expected Boolean, got String ...

妖狐艹你老母/ 2024年04月19日 07:30/ 0 赞/ 54 阅读

相关 Invalid prop: type check failed for prop "name". Expected String with value "17", got Number with va

、错误描述 vue.runtime.esm.js:631 [Vue warn]: Invalid prop: type check failed for pro...

布满荆棘的人生/ 2024年04月18日 08:48/ 0 赞/ 61 阅读

相关 [Vue warn]: Invalid prop: type check failed for prop “clearable“. Expected Boolean, got String with

今天写了点前端，想要一个下拉选择框带清除功能，翻看Element文档得知加上clearable参数即可 ![20200831173742984.png][] 乍一看，默认为

叁歲伎倆/ 2023年10月05日 09:23/ 0 赞/ 40 阅读

相关 vue报错：[Vue warn]: Invalid prop: type check failed for prop "value". Expected Number, got String....

报错信息： ![1716250-20190709221802590-453982360.png][] 错误原因： input绑定item.attr\_vals传入了空值，

我不是女神ヾ/ 2023年08月17日 17:30/ 0 赞/ 51 阅读

相关 [Vue warn]: Invalid prop: type check failed for prop “src“. Expected String, Object, got Module

环境 Laravel8 + Vue2.x + Vuetify2.x 报错 <template> <v-list-item class="mb-

我不是女神ヾ/ 2022年10月29日 09:06/ 0 赞/ 15 阅读

相关 Invalid prop: type check failed for prop "radius". Expected Number, got String.

在vue编写的项目中，在浏览器的console报错： Invalid prop: type check failed for prop "radius". Ex

﹏ヽ暗。殇╰゛Y/ 2022年05月23日 13:10/ 0 赞/ 161 阅读

相关日常报错、[Vue warn]: Invalid prop: type check failed for prop "multiple". Expected Boolean, got String.

VUE报错如下： \[Vue warn\]: Invalid prop: type check failed for prop “multiple”. Expected B

旧城等待，/ 2022年04月08日 10:38/ 0 赞/ 561 阅读

相关心碎的异常（三）——[Vue warn]: Invalid prop: type check failed for prop “index“. Expected String, got Number.

> 最近在做SSM与vue.js做后端管理系统，前端使用的是vue.js的elementUI,在使用进行动态获取循环菜单栏数据时报如上异常，异常一直在页面控制台无限循环报错

朱雀/ 2022年03月09日 12:52/ 0 赞/ 226 阅读

相关 Invalid prop: type check failed for prop “value“. Expected String, Number, got Array问题解觉及查找

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

旧城等待，/ 2021年09月08日 07:24/ 0 赞/ 2805 阅读

相关 Invalid prop: type check failed for prop “orderId“. Expected Number with value 572, got String with

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

女爷i/ 2021年09月03日 06:29/ 0 赞/ 310 阅读