Invalid prop: type check failed for prop value

Vue 报错 Invalid prop: type check failed for prop "value" 问题处理

1. 警告信息提示无效的prop

    prop是Vue组件的一个基本属性,支持绑定传递数据流。
    可跳过,作为了解

  • prop 数据单项传递,支持父组件传递给子组件;
  • 不能在组件中直接修改 prop 传递过来的值
  • prop 验证时,会在实例创建之前进行验证,所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的

2. Vue 项目报错处理

在这里插入图片描述

图2-1:项目报错图

    此处报错重要信息 Invalid prop: type check failed for prop “value”. Expected Array, got String with value “”. 其实已经说明了报错的原因,此处prop 的属性值value 校验失败,(组件)期望的value 类型是Array 数组数据,但目前获取的值是String 类型空字符串""。

    prop 作为属性用于Vue 组件,所以确定是哪个组件报错即可,查看prop 的value 格式修改为Expected 类型,比如此处为Array。

3. 报错详细如下

    这个报错一般不会提示到具体文件中的哪一行代码;

components.js:31 [Vue warn]: Invalid prop: type check failed for prop "value". Expected Array, got String with value "".

found in

---> <ElCascader> at packages/cascader/src/main.vue
       <ElFormItem> at packages/form/src/form-item.vue
         <ElFormGrid> at packages/form-grid/src/form-grid.vue
           <ElFormItem> at packages/form/src/form-item.vue
             <ElCollapseItem> at packages/collapse/src/collapse-item.vue
               <ElCollapse> at packages/collapse/src/collapse.vue
                 <ElScrollbar>
                   <ElForm> at packages/form/src/form.vue
                     <SubEdit> at src\views\Subdivision\Edit.vue
                       <ContentFullScreen> at src\views\ContentFullScreen.vue
                         <Default> at src\views\Default.vue
                           <App> at src\App.vue
                             <Root>

    这里具体到组件 ElCascader 这里引起的警告。和业务开发相关的文件提示到src\views\Subdivision\Edit.vue,其他的文件是底层组件封装,一般不会有问题,出问题首先看项目中业务开发相关的文件。那就是和Edit.vue 文件里引用组件ElCascader 时组件属性值格式校验失败。组件ElCascader 要求的数据格式应为Array;

    再来看提示信息(多说一遍):type check failed for prop “value”. Expected Array, got String with value “”. 是指期望array,但是获取到的是String。这里组件ElCascader 的value 指数组类型,但是我给的默认值是字符串,导致的警告。

4. 问题解决

    以下仅贴出部分关键代码。
    (1)前端Vue文件Edit.vue

<el-form-grid size="xmd">
  <el-form-item :prop="compentKey+'cascadeValue'" :rules="getPropertyRules(propertyComponent.cascadeRules)">
    <el-cascader
      v-model="propertyComponent.cascadeValue"
      placeholder="快捷检索"
      :options="propertyDataSource.goodsTreeNodeList"
      :filterable="true"
      clearable
      change-on-select>
    </el-cascader>
  </el-form-item>
</el-form-grid>

    级联组件el-cascader 接受父组件el-form-item 传递的prop 属性值;后端维护的默认值为空字符串,不是级联组件的默认数据结构,:prop=“compentKey+‘cascadeValue’”,我这里cascadeValue 的默认值由后端维护,所以我这里要修改后端代码。

(2)后端修改即可。我这里后端控制的默认值,一般若不牵涉到后端,直接前端修改即可。
    前端修改的话应该是cascadeValue: ‘’,修改为cascadeValue: ‘[]’
    后端修改默认值cascadeValue = “” 改为cascadeValue = new ArrayList()
后端部分关键代码;
修改前:

case SystemConstant.PropertyComponentConstant.CASCADE_RADIO:
    componentObject.put("cascadeValue", "");    

修改后:

case SystemConstant.PropertyComponentConstant.CASCADE_RADIO:
    componentObject.put("cascadeValue", new ArrayList());    

(3)报错解决效果图
[外链图片转存失败(img-iTm7UojO-1565058260614)(en-resource://database/3595:1)]

图4-1:报错问题解决图

Powered By niaonao

©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页