Invalid prop: type check failed for prop “content“. Expected String, got Array

已于 2022-07-01 12:44:38 修改
阅读量2.8k 收藏
点赞数
分类专栏： 项目 文章标签： bug vue
于 2021-07-21 19:13:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30351747/article/details/118973960
版权
本文介绍了在Vue组件中由于使用三元运算符并误用数组导致的`Invalid prop: type check failed for prop “content”. Expected String, got Array`警告。通过分析错误原因，了解到组件期望的内容属性应为字符串而不是数组。修复方法是移除数组，直接使用双引号包裹三元运算的字符串结果。理解组件的数据验证对于避免此类警告至关重要。
摘要由CSDN通过智能技术生成

推荐一个不错的学习资料库

Invalid prop: type check failed for prop “content”. Expected String, got Array

在这里插入图片描述
大概意思就是，人家需要的是字符串，但是你给人家搞成数组了，就会提示这个warn。

报错代码
<el-tooltip class="item" effect="dark" :content="[scope.row.is_admin == true ? '管理员' : '成为管理员']" placement="right-start">
    <i :class="scope.row.is_admin == true ? 'el-icon-user-solid' : 'el-icon-user'" @click="addAdmin(scope.row)"></i>    
</el-tooltip>

上面代码就是因为第一行那个三元运算使用[]包裹，从而引起的报错

修复，干掉[]，直接使用双引号就好了

修复代码

<el-tooltip class="item" effect="dark" :content="scope.row.is_admin == true ? '管理员' : '成为管理员'" placement="right-start">
    <i :class="scope.row.is_admin == true ? 'el-icon-user-solid' : 'el-icon-user'" @click="addAdmin(scope.row)"></i>    
</el-tooltip>

查了一些资料，这个warn引起的原因就是，组件对注入的数据做了验证。

Mr.Meng_95
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
正确解决“Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String“异常的有效解决方法
wbajsjhhhhh的博客
05-03 5934
正确解决"Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String"异常的有效解决方法
前端开发：遇到提示Invalid prop：type check failed for prop “modelValue“. Expected Number…的解决方法
软贱开发攻城狮
04-04 1万+
前言 在Vue开发中，经常会遇到一些很共性的报错提示，而且有时候提示已经很明确的告诉开发者问题出现在哪里，尤其是在Chrome的控制台输出上面，只要看一下输出日志就知道问题所在。但是对于一些刚入行的开发者来说，看日志的意识还没有养成，需要借助外力来解决问题，这样不是不可以，主要是要学会看输出的日志以及提示，这样才能很好的“对症下药”。本篇博文主要是分享一下查看日志的方法，根据日志来解决警告或者报错提示，分享给有需要的人，这里以一个常见的报错为切入点来讲解。 警告提示 在运行项目之后，Chrom
Invalid prop: type check failed for prop “content“. Expected String with value “0“, vue 警告
pengju12345的博客
06-08 2163
Invalid prop: type check failed for prop "content". Expected String with value "0"报错
使用uni-cms-article文章详情无法正常显示，Invalid prop: type check failed for prop “content“. Expected Array, got
寬真
04-19 269
文章详情无法正常显示，Invalid prop: type check failed for prop "content". Expected Array, got Object ，这样配置之后还是有问题，当时已经晚上十一点多了，于是想着第二天再看，结果第二天早上把Hbuilder中启动的程序全部关了重新启动这个程序之后发现就可以了。，就是把uni-cms中database中的这个文件拷贝到uni-cms-article中，如果还无法显示，可以做在uni-cms中做如下配置试试。
vue3element-plus警告 [Vue warn]: Invalid prop: type check failed for prop “content“. Expected String w
m0_48083875的博客
04-03 1305
el-popover 的可扩展使用 是在内部写扩展内容。不能使用引号 的方式写变量。
[Vue warn]: Invalid prop: type check failed for prop “value“. Expected String, Number, got Array
Liuliu_x的博客
04-28 2020
[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, got Array found in ---> <ElInput> at packages/input/src/input.vue <ElTableBody> <ElTable> at packages/table/src/table.vue ...
Vben Admin [Vue warn]: Invalid prop: type check failed for prop “api“. Expected Function, got Null
qq_51536454的博客
12-28 994
Vben Admin 如何解决警告 [Vue warn]: Invalid prop: type check failed for prop "api". Expected Function, got Null
vue表单验证中 Invalid prop: type check failed for prop “model“. Expected Object, got String with value “l
weixin_43413645的博客
04-19 4041
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。像这样的错误一般是同一类型的错误，是数据类型没给对,你给的值和组件需要的数据类型不一致 错误截图 以上就是报错信息 错误分析 报错信息的意思是：无效的命名数据:“数据”类型检查失败。期望数组，得到字符串/对象， 已经很明
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 “xxx”. Expected Boolean, got String“异常的解决方案
最新发布
2301_79779756的博客
05-09 2389
在Vue.js等前端框架中，组件的props（属性）是用来接收来自父组件的数据的。每个prop都可以被指定一个类型，如String、Number、Boolean、Array、Object、Date、Function、Symbol以及任何自定义的构造函数。当传递给组件的prop值类型与定义的期望类型不符时，Vue会在控制台中发出警告，提示类型检查失败。
Invalid prop: type check failed for prop "data". Expected Array, got String.
qq_39039287的博客
12-05 1万+
vue组件使用的时候出现数据不匹配的情况，报的警告错误： 1.在数据定义的时候直接定义的字符串，而不是数组； 数据格式定义错误，list应该定义为null不能为字符串 2.数据在请求的时候，后端给的是JSON字符串数据，而不是JSON对象 直接转换也是可以的，开始我就这样转换了，没有改了。 ...
[Vue warn]: Invalid prop: type check failed for prop “content“.
小废物
10-21 1509
[Vue warn]: Invalid prop: type check failed for prop “content”. Expected Number, String, got Function 在使用vant组件调用Badge 徽标时 ，设置 content 属性后,出现的错误 查资料发现是忘记给 content设置 类型了！ 大家在使用时特别注意 正确如下： <!-- 底部添加评论区域 --> <div class="icon-box">
解决Invalid prop: type check failed for prop “data“. Expected Array, got Object 报错
奥特蛋的博客
02-15 1万+
Invalid prop: type check failed for prop “data”. Expected Array, got Object 报错
关于Invalid prop: type check failed for prop "row". Expected String, got Object.的问题及审查办法
热门推荐
Dreamer_xr的博客
09-13 15万+
项目是Vue的，基于elementUI的后台管理系统。 Invalid prop: type check failed for prop "row". Expected String, got Object. 昨天遇到了这么个错误，找了半天，网上也找了很久的资料，有很多跟我遇到的问题类似的有很多，但解决办法形似各样，没有我这种情况的，但还好经过我的不懈努力还是找到了原因。 一、我从父组件传递...
Invalid prop: type check failed for prop “index“. Expected String with value “100“, got Number with
m0_56302604的博客
03-16 1431
在使用element UI 的导航菜单时，菜单数据从后台获取过来后显示，出现错误： 原因： 导航菜单中的index字段要是字符串格式，但是后台数据是number格式，所以才会有以上格式警告。 解决办法： 可以将绑定index字段的数据转换成字符串格式。 vue代码: <el-menu mode="horizontal" :default-active="activePath"> <!-- 一级菜单 --> <el-submenu :index="item.cate_id
【已解决】Invalid prop: type check failed for prop “data“. Expected Array, got String with value ““.
还有很长很长的路
12-13 5万+
解决问题：Invalid prop: type check failed for prop “data“. Expected Array, got String with value ““.
Invalid prop: type check failed for prop "content". Expected String, got Date
12-30
根据提供的引用内容，你遇到了一个错误：Invalid prop: type check failed for prop "content". Expected String, got Date. 这个错误意味着你传递给组件的属性"content"的类型应该是字符串，但实际上传递的是一个日期类型的值。 为了解决这个问题，你可以按照以下方法之一进行操作： 1. 将日期类型的值转换为字符串类型的值，然后将其传递给"content"属性。你可以使用日期对象的toString()方法或者其他日期格式化方法将日期转换为字符串。例如： ```javascript const date = new Date(); const dateString = date.toString(); <MyComponent content={dateString} /> ``` 2. 确保你传递给"content"属性的值是一个字符串。如果你使用的是其他类型的值，例如数字或对象，你需要将其转换为字符串。你可以使用toString()方法将其他类型的值转换为字符串。例如： ```javascript const number = 123; const numberString = number.toString(); <MyComponent content={numberString} /> ``` 请注意，具体的解决方法取决于你的代码和使用的框架或库。你需要根据你的具体情况选择适合的方法来解决这个问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值