vue 报错 Invalid prop: type check failed for prop “span“.

最新推荐文章于 2023-08-05 10:56:00 发布
原创 最新推荐文章于 2023-08-05 10:56:00 发布 · 5.4k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #前端 #javascript
此博客分享了Vue应用中遇到的常见警告，关于span prop类型错误，原因在于缺少正确的数值18。作者提醒在使用<el-col>组件时，务必加上正确的属性值。欢迎交流学习前端细节问题解决方案。

vue 报错 Invalid prop: type check failed for prop "span". Expected Number with value 18, got String with value "18"


仅供参考 自我记录

[Vue warn]: Invalid prop: type check failed for prop "span". Expected Number with value 18, got String with value "18".在这里插入图片描述

(1) 原因就是 span前面没有加:

<el-col :span="18"></el-col>

平时遇到的一些小问题 自我记录 有补充的地方希望大家多多提出意见 共同学习!
如有转载 请备注原文地址!

前端开发：遇到提示Invalid prop：type check failed for prop “modelValue“. Expected Number…的解决方法
全沾软贱开发攻城狮
04-04 1万+
前言 在Vue开发中，经常会遇到一些很共性的报错提示，而且有时候提示已经很明确的告诉开发者问题出现在哪里，尤其是在Chrome的控制台输出上面，只要看一下输出日志就知道问题所在。但是对于一些刚入行的开发者来说，看日志的意识还没有养成，需要借助外力来解决问题，这样不是不可以，主要是要学会看输出的日志以及提示，这样才能很好的“对症下药”。本篇博文主要是分享一下查看日志的方法，根据日志来解决警告或者报错提示，分享给有需要的人，这里以一个常见的报错为切入点来讲解。 警告提示 在运行项目之后，Chrom
vue 报错Invalid prop: type check failed for prop “span“. Expected Number, with value 2, got String wit
xiaoyuer_2020的博客
08-16 4064
vue 报错Invalid prop: type check failed for prop "span". Expected Number, with value 2, got String wit
vue.runtime.esm.js:4605 [Vue warn]: Invalid prop: type check failed for prop “disabled“. Expected Bo
2201_75705263的博客
07-17 3020
翻译为：Vue .runtime.esm.js:4605 [Vue warn]:无效的prop:类型检查失败的prop "disabled"。预期的布尔值，得到值为"true"的字符串。解决办法：把变量数据disabled类型改为布尔型；
elementui分页报错Invalid prop:type check failed for prop total.Expected Number with value
qq_38179746的博客
12-09 1万+
使用element-ui的分页时，页面报错 报错：vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop “total”. Expected Number with value NaN, got Function 刚开始在分页里绑定了分页的总数据 <el-paginati...
Invalid prop：type check failed for prop.Expected String with value“[object Object]”got Object
qq_45796592的博客
08-05 2万+
Invalid prop：type check failed for prop.Expected String with value“[object Object]”got Object bug解决
vue 报错Invalid prop: type check failed for prop "span". Expected Number,
ghd602338792的博客
05-06 3万+
之前在一个vue输入框填写内容时,无论输入什么都报错,报错信息:Invalid prop: type check failed for prop "span". Expected Number,got String,刚开始以为是输入的内容格式的问题,可是,并没有做校验之类的判断啊,又在其他输入框输入,还是报错; 后来仔细查找问题,发现是在span前面少了:,添加:以后,再无报错...
Invalid prop: type check failed for prop “span“报错
一般社员的博客
11-18 769
Vue项目遇到这个报错，在span加：就可以了
Invalid prop: type check failed for prop “span“.
m0_52043522的博客
03-22 484
运行Vue + Element UI项目，发现报错如下： 到项目中检查，发现前面的span有冒号，但是“16”的span没有冒号。加上冒号，就解决了这个错误。 <el-col :span="8" style="margin-top: 20px"> </el-col> <el-col style="margin-top: 20px" :span="16"> </el-col> ...
[Vue warn]: Invalid prop: type check failed for prop “currentPage“. Expected String with value “1“
qq_44267691的博客
10-10 5977
因为我是把这个currentPage变量存到了localStorage里面，存进去的是int类型，拿出来的就是string类型了，所以再次复制给currentPage变量会有类型冲突。解决方法：将localStorage的数据变量拿出来时转换成int类型就好（ 通过parseInt()函数实现 ），保持前后变量赋值始终一致。出现这个的原因是因为定义的初始currentPage变量为整型，后面赋值时变为了string类型。当然一开始的data()里面定义变量也要为整型。
解决[Vue warn]: Invalid prop: type check failed for prop “index“.问题
m0_55728090的博客
04-15 8767
[Vue warn]: Invalid prop: type check failed for prop "index". Expected String, got Undefined [Vue 警告]：属性无效：属性“索引”的类型检查失败。预期字符串，未定义 这个问题会出现在控制台，虽然不影响运行，但是看着有爆红，就忍不住去解决。 能有index，且下面看到错的位置，我觉得应该是Home2文件了，因为里面写菜单侧边导航，这里会用到索引，然后点进去排查原因。 该问题是需要一个String字符串..
[Vue warn]: Invalid prop: type check failed for prop “image“. Expected String, got Null.
资深程序员，曾自学JAVA，C#，如今从业于网安行业
11-14 3081
这里翻译过来就是image属性应该为String，但是为null 就是这里，两种原因，第一种，oss的impl实现层路径写错了 第二种，你的头像没加载出来，像这样： ok，完美解决！
Invalid prop: type check failed for prop “span“. Expected Number with value 8, got String with value
xplidelphi的专栏
07-14 7536
之所以出现这个问题是因为少一个冒号，span之前有一个冒号。 <el-col :span=8>
[Vue warn]: Invalid prop: type check failed for prop “value“. Expected
m0_51152244的博客
07-28 8164
解决： [Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, got Array
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 “data“. Expected Array, got Object
热门推荐
Codernmx
01-09 5万+
解决：[Vue warn]: Invalid prop: type check failed for prop “data”. Expected Array, got Object 原因是因为你初始化数据的时候是想要保存一个对象但是你接收到的数据是一个数组： 修改为数组就好了
控制台警告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".
[Vue warn]: Invalid prop: type check failed for prop “disabled“
易小花的博客
07-27 1万+
vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop “disabled” . Expected Boolean, got String with value “isdisabledFn()” 问题描述 vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop “disabled” . Expect
完美解决 报错 Vue Invalid prop: type check failed for prop “min“. Expected Number with value 1,
xiaohua616的博客
04-20 1213
完美解决Invalid prop: type check failed for prop “min“. Expected Number with value 1,
[Vue warn]: Invalid prop: type check failed for prop “xxx“.Expected Boolean, got String with value
Alanrnzearn的博客
06-29 1万+
        在输入框中使用clearable属性即可得到一个可清空的输入框，所以常常会用到这个属性。但是在使用时打开控制台提示出现了下面这条标红的信息。 [Vue warn]: Invalid prop: type check failed for prop "clearable". Expected Boolean, got String with value "true". 控制台显示如下： 一开始以为是否是自己语法写错了，打开
vue报错：Invalid prop: type check failed for prop “model“. Expected Object, got Array解决
weixin_45237107的博客
11-26 5892
在用vue实现前端界面时，报错如上图所示。错误表示期望获得的是一个对象，却得到了一个数组。检查代码后发现，在绑定表单数据时错误的将insertData写成了数组的形式： data(){ return { tableData:[], dialogFormVisible:false, insertData:[{ code:'', name:'', result:'', d.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值