1. 警告信息提示无效的prop
prop是Vue组件的一个基本属性,支持绑定传递数据流。
可跳过,作为了解
- prop 数据单项传递,支持父组件传递给子组件;
- 不能在组件中直接修改 prop 传递过来的值
- prop 验证时,会在实例创建之前进行验证,所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的
2. Vue 项目报错处理
此处报错重要信息 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)报错解决效果图
Powered By niaonao