报错信息:

代码信息:
调用一个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的更多相关文章

  1. 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 ...

  2. 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". ...

  3. [Vue warn]: Invalid prop: type check failed for prop "percentage". Expected Number, got Null

    Vue组件报错 <ElProgress> at packages/progress/src/progress.vue 用了element组件 绑定数据时后端给我们传的参数为null,所以组 ...

  4. [VUE ERROR] Invalid prop: type check failed for prop "list". Expected Array, got Undefined

    错误原因: 子组件 props -> list 要求接收的数据类型是 Array, 然而实际接收到的是 Undefined. 子组件代码: props: { list: { type: Arra ...

  5. [Vue warn]: Invalid prop: type check failed for prop "fullscreen"

    fullscreen属性是Dialog弹窗中定义是否为全屏 Dialog的属性,element 官方文档中默认值是false ,于是加入是对其赋值 true,然后报了下面的错误: 解决办法:实际上并不 ...

  6. 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 ...

  7. vue中data中引用本地图片报错404

    首先说明vue-cli中assets和static两个文件的区别 1.assets在项目编译的过程中会被webpack处理理解为模块依赖,如果执行npm run dev或npm run build命令 ...

  8. 在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错误 ...

  9. Vue报错type check failed for prop

    在报错的'value'属性前面加:或者去掉:即可解决问题.

随机推荐

  1. 阅读之spring+Dubbo

    pringBoot+Dubbo 搭建一个简单的分布式服务 地址 什么是 Duboo? Apache Dubbo (incubating) |ˈdʌbəʊ| 是一款高性能.轻量级的开源Java RPC ...

  2. grunt-contrib-cssmin CSS压缩以及合并

    grunt-contrib-cssmin:压缩以及合并CSS文件 安装插件:npm install grunt-contrib-cssmin --save-dev 不设置compatibility与n ...

  3. Struts2-Action接受参数方式、method属性使用及通配符的配置

    一.Action接受参数的方式 1.属性方式接收 首先编写一个用于上传参数的页面 <%@ page contentType="text/html;charset=UTF-8" ...

  4. C# 扩展、常用方法

    项目基本做完了,抽空整理下里面用到的扩展方法,以及复用度很高的代码,省的以后到处去找. 一.C#扩展方法——Distinct去重 二.C#扩展方法——获得枚举Description 三.C#扩展方法— ...

  5. Linux培训教程lgzip命令详解和使用实例

    gzip不仅可以用来压缩大的.较少使用的文件以节省磁盘空间,还可以和tar命令一起构成Linux操作系统中比较流行的压缩文件格式.据统计,gzip命令对文本文件有60%-70%的压缩率. 1.命令格式 ...

  6. Codeforces 932 E Team Work ( 第二类斯特林数、下降阶乘幂、组合数学 )

    题目链接 题意 : 其实就是要求 分析 : 先暴力将次方通过第二类斯特林数转化成下降幂 ( 套路?) 然后再一步步化简.使得最外层和 N 有关的 ∑ 划掉 这里有个技巧就是 将组合数的表达式放到一边. ...

  7. 【杂题】[CodeForces 1172E] Nauuo and ODT【LCT】【口胡】

    Description 给出一棵n个节点的树,每个点有一个1~n的颜色 有m次操作,每次操作修改一个点的颜色 需要在每次操作后回答树上\(n^2\)条路径每条路径经过的颜色种类数和. \(n,m< ...

  8. AtCoder AGC017C Snuke and Spells

    题目链接 https://atcoder.jp/contests/agc017/tasks/agc017_c 题解 很久前不会做看了题解,现在又看了一下,只想说,这种智商题真的杀我... 转化成如果现 ...

  9. JS框架_(Progress.js)圆形动画进度条

    百度云盘 传送门 密码: 6mcf 圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> < ...

  10. @vue/cli 3.x 版本配置productionGzip提高性能

    第一步:安装插件 npm i -D compression-webpack-plugin 第二步:引入.在文件vue.config.js里导入compression-webpack-plugin,并添 ...