2020/03/18 vue标签中的冒号 &错误 Invalid prop. Expected Number with value

最新推荐文章于 2024-08-30 14:22:27 发布
原创 最新推荐文章于 2024-08-30 14:22:27 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解决了在使用Vue框架时，遇到的maxlength属性类型检查失败的错误。详细介绍了如何将maxlength属性正确设置为数值类型，避免传入字符串类型导致的问题。通过修改代码，将maxlength属性前加上冒号，使其成为表达式而非字符串字面量。

报错提示 ：

Invalid prop: type check failed for prop "maxlength". Expected Number with value 20, got String with value "20".

起因：按iview示例写入代码中

修改：maxlength 改为 =>  :maxlength

 

vue组件属性中

冒号是vue 的 v-bind 语法糖

加冒号的，说明后面的是一个变量或者表达式，没加冒号的就是对应的字符串字面量。

前端开发：遇到提示Invalid prop：type check failed for prop “modelValue“. Expected Number…的解决方法
全沾软贱开发攻城狮
04-04 1万+
前言 在Vue开发中，经常会遇到一些很共性的报错提示，而且有时候提示已经很明确的告诉开发者问题出现在哪里，尤其是在Chrome的控制台输出上面，只要看一下输出日志就知道问题所在。但是对于一些刚入行的开发者来说，看日志的意识还没有养成，需要借助外力来解决问题，这样不是不可以，主要是要学会看输出的日志以及提示，这样才能很好的“对症下药”。本篇博文主要是分享一下查看日志的方法，根据日志来解决警告或者报错提示，分享给有需要的人，这里以一个常见的报错为切入点来讲解。 警告提示 在运行项目之后，Chrom
前端开发：Vue组件中的冒号用法
全沾软贱开发攻城狮
06-16 1万+
在Vue组件的使用中某一变量名前面加冒号，其实是为了动态的绑定一个变量或者表达式。在Vue.js中明确有一节是关于冒号用法的，其实冒号是v-bind的缩写，也就是冒号用法就是v-bind用法。那么下面就来看看关于v-bind相关的内容。v-bind的缩写就是":"。预期：动态地绑定一个或者多个attribute，或者一个组件prop到表达式。在绑定class或者style attribute的时候支持其他类型的值，如数组或者对象。在绑定prop时，prop必须要在子组件中声明，可以用修饰符指定不同的绑定类型
控制台警告Invalid prop: type check failed for prop “modelValue“. Expected Number with value 0, got String
Daisy_ls的博客
10-26 1万+
Invalid prop: type check failed for prop "modelValue". Expected Number with value 0, got String with value "0".
Expected Number with value XX, got String with value “XX“
热门推荐
qq_42900469的博客
04-16 1万+
Invalid prop: type check failed for prop "width". Expected Number with value XX, got String with value "XX" 在使用element的进度条的时候，出现了这个问题，发现我的width设置属性是width=“66”， 出现这个原因是因为组件当着字符串处理了，则在width前面加上":"，或则自定义一个变量就解决了 ...
Expected Number with value 6154.9, got String with value “6154.9“.
范天缘的博客
07-16 725
Invalid prop: type check failed for prop “endVal”. Expected Number with value 6154.9, got String with value “6154.9”. 无效的属性：属性“endVal”的类型检查失败。期望值为6154.9的数字，得到值为“6154.9”的字符串。 提示的很明白,希望是Number类型,但是现在是 String类型 把String 转成 Number Number(xxx) ...
[Vue warn]: Invalid prop: type check failed for prop "bottomPx". Expected Number with value 70, got String with value "70".
最新发布
12-07
在Vue中出现 'Invalid prop: type check failed for prop "bottomPx". Expected Number with value 70, got String with value "70".' 警告，是因为传递给 `bottomPx` 属性的值类型不匹配，期望是数字类型，实际传入...
tenant.vue:204 Invalid prop: type check failed for prop "total". Expected Number with value 7, got String with value "7".
11-07
Expected Number with value 7, got String with value '7'` 这个错误表明在 `tenant.vue` 文件的第 204 行，组件期望 `total` 属性是一个数字类型，但实际传入的是一个字符串类型。以下是几种可能的解决方法： ##...
[Vue warn]: Invalid prop: type check failed for prop "min". Expected Number with value 20, got String with value "20".
07-31
Expected Number with value 20, got String with value "20". ``` 说明你传递给某个组件的 `min` 属性值是一个字符串 `"20"`，但组件期望的是一个数字类型 `Number`。 --- ### 原因分析： Vue 组件在定义 `...
[Vue warn]: Invalid prop: type check failed for prop "max". Expected Number with value 1.266, got String with value "1.266".
04-23
好的，我现在需要帮助用户解决Vue中的prop类型验证错误，具体是“Invalid prop: type check failed for prop ‘max’. Expected Number, got String”。首先，我要回忆一下Vue的prop验证机制。Vue组件在接收prop时，...
Vue--解决Expected Number with value 123, got String with value “123“.
IT利刃出鞘的博客
01-08 7776
本文用示例介绍Vue开发中的一个常见的警告的方法。 警告信息为：[Vue warn]: Invalid prop: type check failed for prop "age". Expected Number with value 123, got String with value "123". 警告的含义：无效的属性：age属性类型检查失败。期望是一个值为123的Number，但接收到的是值为“123”的String。
使用element-ui中 Invalid prop: type check failed for prop “total“. Expected Number with value NaN报错详解
weixin_45721912的博客
05-07 1万+
Invalid prop: type check failed for prop “total”. Expected Number with value 0, got String with value “”. 问题重现： 本文使用的是elementUI的框架，在开发时加载页面刷新时出现的报错。 问题分析： 发现报错total值为“”,于是去data属性里面去查看total的变量。发现total默认的值为“”，所以分析可能是没有赋初始值的原因引起的，所以我给total赋了一个初始值，这个问题就迎刃而解了
Vue页面出现报错：Invalid prop: type check failed for prop “offset“. Expected Number with value 12, got Stri
yuxuan89814的专栏
10-20 1154
vue el-col 使用出现报错：Invalid prop: type check failed for prop "offset". Expected Number with value 12, got Stri
type check failed for prop "step". Expected Number with value 0.5, got String with value "0.5".
weixin_42576467的博客
12-19 338
这个错误消息表明你在尝试为组件的"step"属性传递一个字符串值，而期望的是一个数字。这意味着你应该将你传递给"step"属性的值改为数字，而不是字符串。 例如，如果你当前写的是这样： <MyComponent step="0.5" /> 你应该改成这样： <MyComponent step={0.5} /> 这样就能修复这个错误了。 ...
解决报错Invalid prop: failed for prop “value“. Expected Number with value 0, got String with value ““
qq_45094682的博客
05-14 1723
vue报错解决，[Vue warn]: Invalid prop: type check failed for prop “value”. Expected Number with value 0, got String with value “”. 不知道错误的宝子们，先给你们翻译一下 无效的道具：道具“value”的类型检查失败。 预期值为 0 的数字，却得到值为空的字符串“”
Invalid prop: type check failed for prop “maxLength“. Expected Number, got String.
码农键盘上的梦
08-16 3370
背景：今天使用Ant Design of Vue的文本域的maxlength属性报错了。 [Vue warn]: Invalid prop: type check failed for prop "maxLength". Expected Number with value
[Vue warn]: Invalid prop: type check failed for prop “total“. Expected Number with value 16, got Str
山顶听风的博客
08-30 598
[Vue warn]: Invalid prop: type check failed for prop "total". Expected Number with value 16, got String with value "16".从报错信息可以看出，是记录总数类型不匹配问题。后端的 Long 型 会以字符串形式传到前端。
[Vue warn]: Invalid prop: type check failed for prop “multipleLimit“. Expected Number with value 1,
新技术革命
09-16 2803
原本是这样写的，控制台就会报标题的错误 <el-select class="select" v-model="ruleForm.defaultlanguageid" multiple multiple-limit=1 placeholder=""> <el-option v-for="item in deflanguageoptions" :key="item.id" :label="item.lang
报错Vue warn]: Invalid prop: type check failed for prop “min“. Expected Number with value 1,
Ggome的博客
11-15 3971
min前加上 : 冒号。
[Vue warn]: Invalid prop: type check failed for prop "multipleLimit". Expected Number with value 1,
although1的博客
03-02 5313
原本是这样写的，控制台就会报标题的错误 <el-select class="select" v-model="ruleForm.defaultlanguageid" multiple multiple-limit=1 placeholder=""> <el-option v-for="item in deflanguageoptions" ...
Invalid prop: type check failed for prop "value". Expected Number with value NaN, got Object
06-21
在 Vue 和 React 中，`prop` 类型检查失败的问题通常是因为传递给组件的 `prop` 数据类型与定义的类型不匹配。以下是针对问题的详细分析和解决方案。 ### 问题分析 在 Vue 或 React 中，当出现类似以下警告时： ``` Invalid prop: type check failed for prop "value". Expected Number, got Object. ``` 这表明组件期望接收到一个 `Number` 类型的值，但实际接收到的是一个 `Object` 类型的值。这种错误可能由以下原因引起： 1. **数据来源问题**：父组件传递的数据类型不符合子组件的预期。 2. **默认值问题**：如果未正确设置默认值，可能会导致类型不匹配。 3. **数据转换问题**：在数据传递过程中，可能发生了意外的类型转换。 --- ### 解决方案 #### 在 Vue 中 Vue 提供了 `props` 的类型验证功能。可以通过以下方式解决类型检查问题： 1. **确保传递正确的数据类型** 父组件中传递给子组件的 `prop` 必须是 `Number` 类型。例如： ```javascript <ChildComponent :value="123" /> ``` 如果传递的是对象，则需要明确将其转换为数字： ```javascript <ChildComponent :value="objectValue ? objectValue.numberField : null" /> ``` 2. **设置默认值** 在子组件中定义 `props` 时，可以设置默认值以避免未定义的情况： ```javascript props: { value: { type: Number, default: 0 // 默认值为数字类型 } } ``` 3. **使用计算属性进行类型转换** 如果无法保证传递的数据类型始终正确，可以在子组件中通过计算属性进行类型转换： ```javascript computed: { safeValue() { return typeof this.value === 'number' ? this.value : 0; // 转换为数字 } } ``` --- #### 在 React 中 React 使用 `PropTypes` 或 TypeScript 进行类型检查。以下是解决方法： 1. **确保传递正确的数据类型** 父组件中传递给子组件的 `prop` 必须是 `Number` 类型。例如： ```jsx <ChildComponent value={123} /> ``` 如果传递的是对象，则需要明确将其转换为数字： ```jsx <ChildComponent value={objectValue ? objectValue.numberField : null} /> ``` 2. **使用 PropTypes 进行类型验证** 在子组件中定义 `prop` 类型时，可以指定为 `number` 并提供默认值： ```javascript ChildComponent.propTypes = { value: PropTypes.number.isRequired }; ChildComponent.defaultProps = { value: 0 // 默认值为数字类型 }; ``` 3. **使用 TypeScript 进行静态类型检查** 如果项目使用 TypeScript，可以通过接口定义 `prop` 类型： ```typescript interface ChildProps { value: number; } const ChildComponent: React.FC<ChildProps> = ({ value }) => { return <div>{value}</div>; }; ChildComponent.defaultProps = { value: 0 }; ``` 4. **在组件内部进行类型转换** 如果无法保证传递的数据类型始终正确，可以在组件内部进行类型转换： ```javascript const safeValue = typeof value === 'number' ? value : 0; ``` --- ### 示例代码 #### Vue 示例 ```javascript // 子组件定义 export default { props: { value: { type: Number, default: 0 } }, computed: { safeValue() { return typeof this.value === 'number' ? this.value : 0; // 转换为数字 } } }; ``` #### React 示例 ```jsx // 使用 PropTypes import PropTypes from 'prop-types'; function ChildComponent({ value }) { const safeValue = typeof value === 'number' ? value : 0; return <div>{safeValue}</div>; } ChildComponent.propTypes = { value: PropTypes.number.isRequired }; ChildComponent.defaultProps = { value: 0 }; ``` --- ###
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值