项目场景:
提示:这里简述项目相关背景:
报错信息如下:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "options". Expected Array, got Object
found in
---> <ElCascader> at packages/cascader/src/cascader.vue
<ElFormItem> at packages/form/src/form-item.vue
<ElForm> at packages/form/src/form.vue
<ElDialog> at packages/dialog/src/component.vue
<AddOrUpdate> at src/views/sys/dept-add-or-update.vue
<D2ContainerFull> at src/components/d2-container/components/d2-container-full.vue
<D2Container>
<DeptList> at src/views/sys/dept.vue
<D2LayoutHeaderAside> at src/layout/header-aside/layout.vue
<App> at src/App.vue
<Root>
前端浏览器控制端报错信息如下图所示:
问题描述
提示:这里描述项目中遇到的问题:
调试页面时,在前端浏览器控制端出现上述图片中的报错信息,我们根据相关的报错信息可以定位到 具体的页面内容中,根据报错信息 提示的 代码如下所示:
原数据代码如下:
//获取医院列表
getCompanyList () {
this.$axios.post('/sys/dept/company_select',{
}).then(res => {
var obj = {
children: [],
currentId: 0,
delFlag: 0,
deptId: 1,
isTop: 1,
name: "平台",
open: '',
orderNum: 0,
parentId: 1,
parentName: '',
positionX: 0,
positionY: 0,
shortName: "平台",
state: '',
type: 0
}
obj.children = res
this.companyList = obj
}).catch(() => {
})
},
原因分析:
提示:根据报错信息分析问题的原因:
查看报错信息含义:
解决方案:
提示:这里填写该问题的具体解决方案:
根据上述报错信息我们大致可以了解到:我们定义了一个数据类型Array,并进行数据传值,但提示传输的数据类型错误 ,数据传的 是 Object.
//获取医院列表
getCompanyList () {
this.$axios.post('/sys/dept/company_select',{}).then(res => {
var obj = {
children: [],
currentId: 0,
delFlag: 0,
deptId: 1,
isTop: 1,
name: "平台",
open: '',
orderNum: 0,
parentId: 1,
parentName: '',
positionX: 0,
positionY: 0,
shortName: "平台",
state: '',
type: 0
}
obj.children = res
// this.companyList = obj
this.companyList.push(obj)
}).catch(() => {})
},
修改后的效果如下图所示:
运行代码后,报错信息不再出现,问题解决。
vue 中数组增加元素的方式,见下篇文章。