vue 报错Invalid prop: type check failed for prop “span“. Expected Number, with value 2, got String wit

最新推荐文章于 2024-07-31 16:35:06 发布
最新推荐文章于 2024-07-31 16:35:06 发布
阅读量3.5k 收藏 1
点赞数 2
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyuer_2020/article/details/126366580
版权
本文介绍了如何解决Element-UI布局组件el-col中span属性引发的错误。错误源于将`span`误写为未经声明的属性，而正确的用法是`:span`。修复此问题后，代码不再报错，确保了Element-UI布局的正常显示。通过阅读Element官方文档，我们可以更好地理解和应用组件属性。
摘要由CSDN通过智能技术生成

控制台报错：
在这里插入图片描述
错误代码如下：

<el-col span="2">
   <el-button
      type="primary"
      @click="handleFunc"
    >
    打印
    </el-button>
</el-col>

错误原因是：span类型是Number，需要在span前面加上冒号，element-UI文档如下：
在这里插入图片描述
Element文档传送门: https://element.eleme.io/#/zh-CN/component/layout

修改后代码：

<el-col :span="2">
   <el-button
      type="primary"
      @click="handleFunc"
    >
    打印
    </el-button>
</el-col>

添加:以后,再无报错。

夏目友人帐...
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发：遇到提示Invalid prop：type check failed for prop “modelValue“. Expected Number…的解决方法
软贱开发攻城狮
04-04 1万+
前言 在Vue开发中，经常会遇到一些很共性的报错提示，而且有时候提示已经很明确的告诉开发者问题出现在哪里，尤其是在Chrome的控制台输出上面，只要看一下输出日志就知道问题所在。但是对于一些刚入行的开发者来说，看日志的意识还没有养成，需要借助外力来解决问题，这样不是不可以，主要是要学会看输出的日志以及提示，这样才能很好的“对症下药”。本篇博文主要是分享一下查看日志的方法，根据日志来解决警告或者报错提示，分享给有需要的人，这里以一个常见的报错为切入点来讲解。 警告提示 在运行项目之后，Chrom
正确解决“Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String“异常的有效解决方法
wbajsjhhhhh的博客
05-03 5886
正确解决"Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String"异常的有效解决方法
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 “percentage“. Expected Number with value 36
最新发布
m0_49014420的博客
07-31 186
Invalid prop: type check failed for prop "percentage". Expected Number with value 64, got String with value
vue 报错 Invalid prop: type check failed for prop “span“.
奔跑吧代码
07-15 5151
`[Vue warn]: Invalid prop: type check failed for prop "span". Expected Number with value 18, got String with value "18".`
Invalid prop: type check failed for prop “span“报错
一般社员的博客
11-18 682
Vue项目遇到这个报错，在span加：就可以了
Invalid prop: type check failed for prop “span“. Expected Number with value 8, got String with value
xplidelphi的专栏
07-14 7162
之所以出现这个问题是因为少一个冒号，span之前有一个冒号。 <el-col :span=8>
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...
vue表单验证中 Invalid prop: type check failed for prop “model“. Expected Object, got String with value “l
weixin_43413645的博客
04-19 4020
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 ““. Expected Number | String, got Array
白瑕 的博客
04-30 2955
记录一个用Props传值时出现的BUG和原因.
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...
❤ vue3项目配置
林太白
04-23 1243
❤ vue3项目配置
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解决
完美解决 报错 Vue Invalid prop: type check failed for prop “min“. Expected Number with value 1,
xiaohua616的博客
04-20 802
完美解决Invalid prop: type check failed for prop “min“. Expected Number with value 1,
element-ui 组件报错： Vue warn]: Invalid prop: type check failed for prop “min“. Expected Number with
weixin_47152812的博客
10-02 1921
element-ui 组件报错： Vue warn]:  Invalid prop: type check failed for prop "min".  Expected Number with value 0, got String with value "0".    出错位置： <el-form-item label="排序" ...
vue报错：Invalid prop: type check failed for prop “gutter“. Expected Number with value 100...
初心不改
08-23 2129
vue报错
Invalid prop: type check failed for prop "radius". Expected Number, got String.
热门推荐
感恩、奋进、自信
06-09 4万+
在vue编写的项目中，在浏览器的console报错：Invalid prop: type check failed for prop "radius". Expected Number, got String.如下图所示：在子组件progress-circle.vue的template中的定义如下： &lt;svg :width="radius" :height="radius" viewBox=...
[Vue warn]: Invalid prop: type check failed for prop "count". Expected Number with value 0, got Stri
阿杰
10-07 4744
<Badge :count="count"> <router-link to="/News"> <img class="demo-badge" src="static\pictureV1.0\Tobar\消息 (3).png" /> </router-...
vue报错 Invalid prop: type check failed for prop "mark". Expected String with value "[object PointerEvent]", got PointerEvent
08-29
你好！对于你的问题，“Invalid prop: type check failed for prop 'mark'. Expected String with value '[object PointerEvent]', got PointerEvent”，这是一个Vue的错误提示。它表明你在一个组件的props中定义了一个名为'mark'的属性，并且期望它的类型为字符串（String），但实际上传入的是一个PointerEvent对象。 要解决这个问题，你可以检查一下传递给'mark'属性的值，确保它是一个字符串类型的值。你可以使用Vue的类型检查来验证传递的值是否符合预期，例如使用`String`作为'mark'属性的类型： ```javascript props: { mark: { type: String, required: true } } ``` 这样，如果传递给'mark'属性的值不是一个字符串，Vue会在开发环境下抛出一个错误，帮助你找到并解决这个问题。 希望这能帮到你！如果你还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值