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'属性前面加:或者去掉:即可解决问题.
随机推荐
- 阅读之spring+Dubbo
pringBoot+Dubbo 搭建一个简单的分布式服务 地址 什么是 Duboo? Apache Dubbo (incubating) |ˈdʌbəʊ| 是一款高性能.轻量级的开源Java RPC ...
- grunt-contrib-cssmin CSS压缩以及合并
grunt-contrib-cssmin:压缩以及合并CSS文件 安装插件:npm install grunt-contrib-cssmin --save-dev 不设置compatibility与n ...
- Struts2-Action接受参数方式、method属性使用及通配符的配置
一.Action接受参数的方式 1.属性方式接收 首先编写一个用于上传参数的页面 <%@ page contentType="text/html;charset=UTF-8" ...
- C# 扩展、常用方法
项目基本做完了,抽空整理下里面用到的扩展方法,以及复用度很高的代码,省的以后到处去找. 一.C#扩展方法——Distinct去重 二.C#扩展方法——获得枚举Description 三.C#扩展方法— ...
- Linux培训教程lgzip命令详解和使用实例
gzip不仅可以用来压缩大的.较少使用的文件以节省磁盘空间,还可以和tar命令一起构成Linux操作系统中比较流行的压缩文件格式.据统计,gzip命令对文本文件有60%-70%的压缩率. 1.命令格式 ...
- Codeforces 932 E Team Work ( 第二类斯特林数、下降阶乘幂、组合数学 )
题目链接 题意 : 其实就是要求 分析 : 先暴力将次方通过第二类斯特林数转化成下降幂 ( 套路?) 然后再一步步化简.使得最外层和 N 有关的 ∑ 划掉 这里有个技巧就是 将组合数的表达式放到一边. ...
- 【杂题】[CodeForces 1172E] Nauuo and ODT【LCT】【口胡】
Description 给出一棵n个节点的树,每个点有一个1~n的颜色 有m次操作,每次操作修改一个点的颜色 需要在每次操作后回答树上\(n^2\)条路径每条路径经过的颜色种类数和. \(n,m< ...
- AtCoder AGC017C Snuke and Spells
题目链接 https://atcoder.jp/contests/agc017/tasks/agc017_c 题解 很久前不会做看了题解,现在又看了一下,只想说,这种智商题真的杀我... 转化成如果现 ...
- JS框架_(Progress.js)圆形动画进度条
百度云盘 传送门 密码: 6mcf 圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> < ...
- @vue/cli 3.x 版本配置productionGzip提高性能
第一步:安装插件 npm i -D compression-webpack-plugin 第二步:引入.在文件vue.config.js里导入compression-webpack-plugin,并添 ...