vue调用组件,组件回调给data中的数组赋值,报错Invalid prop type check failed for prop value. Expecte
报错信息:

代码信息:
调用一个tree组件,选择一些信息
<componentsTree ref="typeTreeComponent"
@treeCheck="treeCheck"
:isClearAllChecked=true
:defaultProps="defaultProps">
</componentsTree>
选择之后返回选中数据信息,并且在父组件中给data中的数组(type、typeName)赋值:
data: function () {
return {
dataForm: {
type: [],
typeName: []
}
}
},
回调方法执行:
treeCheck: function (a, b) {
let t = []
let tid = []
for (var i = 0; i < b['checkedNodes'].length; i++) {
t.push(b['checkedNodes'][i]['name'])
tid.push(b['checkedNodes'][i]['id'])
}
this.dataForm.typeName = [].concat(t)
this.dataForm.type = [].concat(tid)
},
在给type 和typeName 赋值的时候 ,报错
Invalid prop: type check failed for prop "value". Expected String, Number, got Array
解决方法:
重新定义两个变量:
AtypeName: '',
Atype: '',
回调函数的时候给这两个变量赋值:
treeCheck: function (a, b) {
let t = []
let tid = []
for (var i = 0; i < b['checkedNodes'].length; i++) {
// if (b['checkedNodes'][i]['children'].length > 0) continue
t.push(b['checkedNodes'][i]['name'])
tid.push(b['checkedNodes'][i]['id'])
}
this.AtypeName = t.join(',')
this.Atype = tid.join(',')
},
监听这两个值得变化:
watch: {
AtypeName (val) {
this.dataForm.typeName = val.split(',')
this.dataForm.type = this.Atype.split(',')
console.log(this.dataForm)
}
}
变化时,给type 和typeName 赋值
这是折中的解决方案,不熟悉vue不清楚报错原因,先这样解决吧
vue调用组件,组件回调给data中的数组赋值,报错Invalid prop type check failed for prop value. Expecte的更多相关文章
- Vue报错之"[Vue warn]: Invalid prop: type check failed for prop "jingzinum". Expected Number with value NaN, got String with value "fuNum"."
一.报错截图 [Vue warn]: Invalid prop: type check failed for prop "jingzinum". Expected Number w ...
- vue.esm.js?efeb:628 [Vue warn]: Invalid prop: type check failed for prop "defaultActive". Expected String with value "0", got Number with value 0.
vue.esm.js?efeb:628 [Vue warn]: Invalid prop: type check failed for prop "defaultActive". ...
- [Vue warn]: Invalid prop: type check failed for prop "percentage". Expected Number, got Null
Vue组件报错 <ElProgress> at packages/progress/src/progress.vue 用了element组件 绑定数据时后端给我们传的参数为null,所以组 ...
- [VUE ERROR] Invalid prop: type check failed for prop "list". Expected Array, got Undefined
错误原因: 子组件 props -> list 要求接收的数据类型是 Array, 然而实际接收到的是 Undefined. 子组件代码: props: { list: { type: Arra ...
- [Vue warn]: Invalid prop: type check failed for prop "fullscreen"
fullscreen属性是Dialog弹窗中定义是否为全屏 Dialog的属性,element 官方文档中默认值是false ,于是加入是对其赋值 true,然后报了下面的错误: 解决办法:实际上并不 ...
- Vue报错 type check failed for prop “xxx“. Expected String with value “xx“,got Number with value ‘xx‘
vue报错 [Vue warn]: Invalid prop: type check failed for prop "name". Expected String with ...
- vue中data中引用本地图片报错404
首先说明vue-cli中assets和static两个文件的区别 1.assets在项目编译的过程中会被webpack处理理解为模块依赖,如果执行npm run dev或npm run build命令 ...
- 在eclipse中新建java问题报错:The type XXX cannot be resolved. It is indirectly referenced from required .class files
在Eclipse中遇到The type XXX cannot be resolved. It is indirectly referenced from required .class files错误 ...
- Vue报错type check failed for prop
在报错的'value'属性前面加:或者去掉:即可解决问题.
随机推荐
- python时间 time模块和datetime模块
一.time模块 time模块中时间表现的格式主要有三种: a.timestamp时间戳,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量 b.struct_time时间元组,共 ...
- 开始PHP,常量/变量与内存间的关系--传值
一.常见的PHP代码嵌入式方式,与html结合 要注意:文件名后缀必须形如xxx.php否则html将无法解析 二.php脱离html代码独立工作,没有其他代码 不需要借助Apache工作,只需要ph ...
- wx小程序知识点(七)
七.小程序提速与性能优化 参考大佬vicyao的文章 https://blog.csdn.net/wetest_tencent/article/details/61196522 (1)提高页面加载速度 ...
- inline元素导航栏案例
练习一个超链接元素在文档流当中,a标签显示出来的inline这种元素的特性.我们可以用display来将它转换成inline-block类型,这样我们就可以设置它的高度,宽度和它的背景颜色等等特性了. ...
- ASE高级软件工程 第一周博客作业
1.自我介绍 我叫姚顺,是来自哈尔滨工业大学计算机学院的一名大四本科生,专业方向计算机科学,目前在KC组实习.平时的业余时间主要用来打篮球,听音乐,跑步,当然还有游戏(划掉).之前的大学三年主要用来做 ...
- 51 Nod 1066 Bash游戏
1066 Bash游戏 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 有一堆石子共有N个.A B两个人轮流拿,A先拿.每次最少拿1颗,最多拿K颗,拿到 ...
- sh_04_列表排序
sh_04_列表排序 name_list = ["zhangsan", "lisi", "wangwu", "wangxiaoer ...
- Fastdfs 单机安装 教程
分布式存储 CentOS6.5虚拟机环境搭建FastDFS-5.0.5集群 详细的最新版fastdfs单机版搭建 分布式文件系统 - FastDFS 在64位CentOS 下配置安装部署
- [CSP-S模拟测试]:分组配对(倍增+二分)
题目传送门(内部题108) 输入格式 输入文件第一行为两个正整数$n,M$. 接下来两行,第一行为$n$个正整数$a_1\sim a_n$,其中$a_i$表示编号为$i$的男生的实力值:第二行为$n$ ...
- 关于Spring3与Jdk8 遇到的问题ArrayIndexOutOfBoundsException:xxxxxx
Spring 3不完全兼容JDK8. 需要升级到Spring 4才能使用Java 8 lambda表达式.