Vue页面出现报错：Invalid prop: type check failed for prop “offset“. Expected Number with value 12, got Stri

最新推荐文章于 2024-10-15 07:00:00 发布
最新推荐文章于 2024-10-15 07:00:00 发布
阅读量891 收藏 1
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuxuan89814/article/details/133951866
版权

vue页面出现报错：

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

 原因是如下代码中的offset，缺少：

 <el-row>
        <el-col :span="6" offset="12"> </el-col> </el-row>

正确的是：

 <el-row>
        <el-col :span="6" :offset="12">
 </el-col>
      </el-row>

小鱼爱曲奇
关注
前端开发：遇到提示Invalid prop：type check failed for prop “modelValue“. Expected Number…的解决方法
软贱开发攻城狮
04-04 1万+
前言 在Vue开发中，经常会遇到一些很共性的报错提示，而且有时候提示已经很明确的告诉开发者问题出现在哪里，尤其是在Chrome的控制台输出上面，只要看一下输出日志就知道问题所在。但是对于一些刚入行的开发者来说，看日志的意识还没有养成，需要借助外力来解决问题，这样不是不可以，主要是要学会看输出的日志以及提示，这样才能很好的“对症下药”。本篇博文主要是分享一下查看日志的方法，根据日志来解决警告或者报错提示，分享给有需要的人，这里以一个常见的报错为切入点来讲解。 警告提示 在运行项目之后，Chrom
Vben Admin [Vue warn]: Invalid prop: type check failed for prop “api“. Expected Function, got Null
qq_51536454的博客
12-28 1034
Vben Admin 如何解决警告 [Vue warn]: Invalid prop: type check failed for prop "api". Expected Function, got Null
[Vue warn]: Invalid prop: type check failed for prop "fullscreen"
Maggieq8324的博客
09-19 1268
fullscreen属性Dialog弹窗中定义是否为全屏 Dialog的属性，element 官方文档中默认值是false ，于是加入是对其赋值 true，然后报了下面的错误： 解决办法：实际上并不用加 true，直接写fullscreen就行，类似于fullscreen属性一样，element中的很多属性其实不用定义值为true或false，希望看到这篇博文的人有所启发 ...
Invalid prop: type check failed for prop “total“. Expected Number with value x, got String with valu
m0_61849361的博客
08-19 1万+
Invalid prop: type check failed for prop "total". Expected Number with value x, got String with value "x".
Invalid prop：type check failed for prop.Expected String with value“[object Object]”got Object
qq_45796592的博客
08-05 1万+
Invalid prop：type check failed for prop.Expected String with value“[object Object]”got Object bug解决
“Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String“异常的解决方案
2301_79779756的博客
05-09 4673
在Vue.js等前端框架中，组件的props（属性）是用来接收来自父组件的数据的。每个prop都可以被指定一个类型，如String、Number、Boolean、Array、Object、Date、Function、Symbol以及任何自定义的构造函数。当传递给组件的prop值类型与定义的期望类型不符时，Vue会在控制台中发出警告，提示类型检查失败。
2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop “index”.
01-08
1.在写循环的时候遇见这个的 原创文章 96获赞 50访问量 6万+ 关注 私信 展开阅读全文 作者：itwangyang520
vue表单验证中 Invalid prop: type check failed for prop “model“. Expected Object, got String with value “l
weixin_43413645的博客
04-19 4120
4/19 在写vue项目注册页面中rules规则的时候，反复验证prop和rules中值相同的情况下，运行一直产生报错 <template> <div> <div id="register" class="box" > <h3>注册登录页面</h3> <el-form ref="ruleform" :rules="rules" model="loginForm" label-width="20%"> .
Invalid prop: type check failed for prop "name". Expected String with value "17", got Number with va
游海东的技术专栏
09-04 1万+
1、错误描述 vue.runtime.esm.js:631 [Vue warn]: Invalid prop: type check failed for prop "name". Expected String with value "17", got Number with value 17. found in ---> <ElCheckbox> at package...
Vue错误[Vue warn]: Invalid prop: type check failed for prop “data“. Expected Array, got String
熟悉JS拼写的FE
09-15 1万+
Vue-常见错误[Vue warn]: Invalid prop: type check failed for prop “data”. Expected Array, got String 前言:项目中遇见 Invalid prop…Expected XXX, got XXX。像这样的错误一般是同一类型的错误，是数据类型没给对,你给的值和组件需要的数据类型不一致 错误截图 以上就是报错信息 错误分析 报错信息的意思是：无效的命名数据:“数据”类型检查失败。期望数组，得到字符串/对象， 已经很明
Vue异常:Invalid prop: type check failed for prop
麦叔
06-21 1万+
一.问题描述 用elementUI写vue 项目 ,在浏览器调试的时候报了这个错误. Invalid prop: type check failed for prop "border". Expected Boolean, got String with value "true" 原因是给表格加border=“true”,让表格得到竖直的框线. 插件希望得到的是一个布尔值,但是得到的是true的字符串. 二.解决方案 解决办法:在border="true"前加上一个冒号: 原来的: 修改后: ..
报错:[Vue warn]: Invalid prop: type check failed for prop “title“Expected string with value “11“...
感谢您阅读我的博客，如果您有任何问题或建议，请随时联系我。
05-08 3332
valid prop: type check failed for prop "title". Expected String with value "11", got Number with value 11.
Invalid prop: type check failed for prop “onUpdate:value“
前端开发
05-19 3126
Invalid prop: type check failed for prop "onUpdate:value"
[Vue warn]: Invalid prop: type check failed for prop “pageSize“. Expected Number with value NaN
最新发布
XING的博客
10-15 376
pageSize属性期待数据类型为Number，值为NaN没有被定义。分析可知，没有给total赋初始值的原因，给total赋初始值，问题就解决了。使用的elementUI框架(分页)，在加载页面时出现以上报错信息。
Invalid prop: type check failed for prop “value”. Expected String, Number, got Array
gaoyu007的博客
07-19 5万+
报错内容：Invalid prop: type check failed for prop “value”. Expected String, Number, got Array。 原因：relateuserCount在该change事件中有赋值，该属性本身是string类型，prop也是该属性。但是现在复制强制改成数组类型，但是prop并不支持prop为数组类型，prop对应值只能是string或者number。导致报错。 select 多选、远程搜索都有，参考官方示例。 如果el-option是v-fo
Invalid prop: type check failed for prop ““. Expected Number | String, got Array
白瑕 的博客
04-30 3181
记录一个用Props传值时出现的BUG和原因.
Invalid prop: type check failed for prop value
niaonao
08-06 10万+
Vue 报错 Invalid prop: type check failed for prop "value" 问题处理
Vue报错：Invalid prop: type check failed for prop “roleList“. Expected Object, got Array 解决方法
cdtaogang's blog
08-10 5701
根据以上可以看到我们在父组件向子组件传递的 roleList 变量的类型是数组，而在子组件中 roleList 变量的类型是对象，先看看父组件和子组件传递的代码，这里注意看两个组件之间通过 Props 属性传值所定义的类型。，这就是导致错误的原因，修改 Props 属性的 roleList 变量的类型和默认值即可。问题解决，所以大家在写代码的时候特别是传递参数时，注意两边参数定义的类型是否一致！在子组件中我们的期望是一个对象，而你父组件中给我传递了一个数组。
vue常见错误：Invalid prop: type check failed for prop “data“. Expected Array, got Object
热门推荐
红岸基地
05-28 20万+
错误截图 错误分析 这个错误的意思是说：无效的命名数据:“数据”类型检查失败。期望数组，得到对象，那么我们这个时候很明白了，是类型不对，但是是哪一行的呢？打开错误信息下面的详情，这个时候找到后缀是自己页面的.vue文件，看看是哪一行，就知道问题在哪了！下面的是我的： warn @ vue.esm.js?efeb:610 assertProp @ vue.esm.js?efeb:1691 vali...
Vue warn]: Invalid prop: type check failed for prop "maxlength". Expected Number with value 200, got
04-09
根据提供的引用内容，可以看出在Vue中出现了一个警告，警告信息为"Invalid prop: type check failed for prop 'maxlength'. Expected Number with value 200, got ?"。这个警告是由于在使用Vue的组件时，传递给maxlength属性的值类型不正确导致的。 解决这个问题的方法是将传递给maxlength属性的值改为Number类型。具体的解决方法如下[^1][^2]： 1. 将maxlength属性的值改为Number类型的200： ```html <a-textarea v-model="inputvalue" :maxlength="200" placeholder="请输入备注不超过200字" allow-clear /> ``` 2. 使用v-bind指令将maxlength属性的值绑定为Number类型的200： ```html <a-textarea v-model="inputvalue" v-bind:maxlength="200" placeholder="请输入备注不超过200字" allow-clear /> ``` 这样就可以解决警告信息中的错误，确保传递给maxlength属性的值为Number类型的200。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值