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'属性前面加:或者去掉:即可解决问题.
随机推荐
- hiho #1032: 最长回文子串
#1032 : 最长回文子串 时间限制:1000ms 单点时限:1000ms 内存限制:64MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在 ...
- Python 面向对象Ⅴ
基础重载方法 下表列出了一些通用的功能,你可以在自己的类重写: 运算符重载 Python同样支持运算符重载,实例如下: 以上代码执行结果如下所示: 类属性与方法 类的私有属性 __private_at ...
- Flash大文件断点续传解决方案
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
- Nowcoder 挑战赛23 B 游戏 ( NIM博弈、SG函数打表 )
题目链接 题意 : 中文题.点链接 分析 : 前置技能是 SG 函数.NIM博弈变形 每次可取石子是约数的情况下.那么就要打出 SG 函数 才可以去通过异或操作判断一个局面的胜负 打 SG 函数的时候 ...
- 51 Nod 1069 Nim游戏
分析: a1 xor a2 xor a3 ... xor an !=0 则为必胜态 a1 xor a2 xor a3 ... xor an ==0 则为必败态 也就是说只要计算异或值,如果非零则A赢, ...
- HGOI20190813 省常中互测6
Problem A 蛋糕 将$n \times m $大小的蛋糕切成每块为$1 \times 1$大小的$n\times m$块. 交换任意两块蛋糕的切割顺序的方案算作一种. 对于$100 \%$的数 ...
- 2-SAT (two-statisfiability) 算法 学习笔记
$2-SAT$问题指的是对于若干限制求出一组可行解的问题. 考虑对于$n$个值域为${0,1}$的变量$x_1 , x_2 ,...,x_n$ 满足若干限制: 若 $x_i = p$ 则 $x_j = ...
- linux下nohup日志切割方案
1.nohup命令解释: a.语法:nohup [command] [args] [&] b.说明:nohup 命令运行由 Command 参数和任何相关的 Arg 参数指定的命令,忽略所有挂 ...
- openvas 安装
NMAP apt-get update & apt-get upgrade kali的更新命令 https://www.fujieace.com/kali-linux/update-sourc ...
- App可视化埋点技术原理大揭秘
一.背景 运营者能够对用户行为进行分析的前提,是对大量数据的掌握.在以往,这个数据通常是由开发者在控件点击.页面等事件中,一行行地编写埋点代码来完成数据收集的.然而传统的操作模式每当升级改版时,开发和 ...