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

原创已于 2023-08-31 09:49:06 修改 · 4.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

于 2023-04-20 17:36:40 首次发布

在Vue项目中遇到一个警告，Vuewarn指出期望`options`属性为Array，但接收到的是Object。错误出现在ElCascader组件中。问题源于从API获取的数据被赋值给了对象的children属性，而不是直接赋值给一个数组。通过将`this.companyList=obj`改为`this.companyList.push(obj)`，解决了数据类型不匹配的问题，从而消除了警告，成功地将对象添加到数组中。

项目场景：

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

报错信息如下：

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(() => {})
    },

修改后的效果如下图所示：
在这里插入图片描述
运行代码后，报错信息不再出现，问题解决。