VUE 项目浏览器端出现红色 warn 信息：[Vue warn]: Invalid prop: type check failed for prop “options“. Expected Arr

项目场景：

提示：这里简述项目相关背景：

报错信息如下：

---

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 = []
        // this.companyList = obj
        this.companyList.push(obj)
      }).catch(() => {})
    },

修改后的效果如下图所示：

运行代码后，报错信息不再出现，问题解决。

vue 中数组增加元素的方式，见下篇文章。