报错信息:

代码信息:
调用一个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. python fc21~fc29踩坑记录

    最近在公司的linux fc21上安装python和anaconda, 直接mintmenu给挂掉了. 真是弱爆了. 后来,升级终于来了, 升到了fc29.好,再看看, python2.7还在, py ...

  2. vue history模式下的微信支付,及微信支付授权目录的填写,处理URL未注册

    微信公众号配置网页授权域名:填写网址域名 微信开发者平台配置url: 访问url:http://www.baidu.com/pay/ment 支付授权目录:http://www.baidu.com/p ...

  3. Andrid Studio Gradle sync failed: A problem occurred configuring project ':app' 解决方法

    Android Studio中进行Gradle sync 时出现了这个错误,Android Studio 出错提示是 Gradle sync failed: A problem occurred co ...

  4. 阻止默认/冒泡事件(兼容ie)

    (1) 阻止默认事件 function(e){ if(e && e.preventDefault){ e.preventDefault(); }else{ //IE window.ev ...

  5. string、wstring、CString 相互转换

    关于string wstring cstring的功能这里不详细叙述了 可参见这里:https://www.cnblogs.com/guolixiucai/p/4716521.html 关于转换这里只 ...

  6. static后期静态绑定

    先说一下__CLASS__,get_class() ,  get_called_class() 区别: __CLASS__获取当前的类名, get_class()与上面一样,都是获取当前的类名, ge ...

  7. Spring CommonsMultipartResolver 上传文件

    转:http://yanglei008.iteye.com/blog/246920 ...Controller...{ // 创建一个通用的多部分解析器 CommonsMultipartResolve ...

  8. jquery delegate()方法 语法

    jquery delegate()方法 语法 作用:delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.使用 delegate( ...

  9. java支持断点续传文件上传和下载组件

    java两台服务器之间,大文件上传(续传),采用了Socket通信机制以及JavaIO流两个技术点,具体思路如下: 实现思路: 1.服:利用ServerSocket搭建服务器,开启相应端口,进行长连接 ...

  10. 冒泡排序和选择排序(bubble sort and selection sort)

    Bubble sort Basic Method: import random nums = [random.randint(1,20) for _ in range(10)] #制作一个无序数字列表 ...