Vue 报错 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）报错解决效果图

图4-1：报错问题解决图 The End