VUE 프로젝트 브라우저에 빨간색 경고 메시지가 나타납니다: [Vue warn]: Invalid prop: type check failed for prop "options". 예상 도착

프로젝트 시나리오:

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

오류 메시지는 다음과 같습니다.

---

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에서 배열에 요소를 추가하는 방법은 다음 문서를 참조하세요.