Invalid prop: type check failed for prop "data". Expected Array, got String.

这个bug的报错信息是"Invalid prop: type check failed for prop 'data'. Expected Array, got Object"，意思是期望得到一个数组类型的数据，但实际上传入的是一个对象类型的数据。为了解决这个bug，需要将传入的对象转换成数组。

有很多种方法可以解决这个问题，下面我介绍一种简单的方法。首先，我们定义了一个接收数据的格式report：

report: {
  'name': '',
  'testDate': '',
  'testTime': '',
  'sex': '',
  'age': '',
  'testDct': '',
  'dctTestDate': '',
  'reportDate': '',
}

然后，我们将resp.data赋值给report，就会报错了。那么如何解决呢？只需要将report的初始值设置为null即可：

report: null

这样就不会报错了。接下来，我们需要让table来接收这个数据。在el-table-column中，使用prop属性来绑定数据的字段名，如prop="proName"。然后，在template中使用scope来引用这个字段的值，如{{ scope.row.proName }}。

这样就可以正常显示数据而不报错了。

相关问题

Invalid prop: type check failed for prop thDataArr. Expected , got Array

当在Vue项目中通过Props属性向子组件传递值时，如果传递的值的类型与子组件中定义的类型不匹配，就会出现Invalid prop: type check failed for prop的错误信息。在这个错误信息中，会提示期望的类型和实际传递的类型不匹配。例如，当传递一个数组给一个期望接收对象类型的props时，就会出现类似于Invalid prop: type check failed for prop thDataArr. Expected Object, got Array的错误信息。

解决这个问题的方法是，在父组件中传递给子组件的值的类型必须与子组件中定义的类型相匹配。如果子组件中定义的类型是对象，那么在父组件中传递给子组件的值也必须是一个对象。如果子组件中定义的类型是数组，那么在父组件中传递给子组件的值也必须是一个数组。

以下是一个解决这个问题的例子：

假设子组件中定义了一个props，期望接收一个对象类型的值：

props: {
  person: Object
}

在父组件中，如果传递一个数组给这个props，就会出现Invalid prop: type check failed for prop的错误信息：

<template>
  <div>
    <child-component :person="['John', 'Doe']"></child-component>
  </div>
</template>

正确的做法是传递一个对象给这个props：

<template>
  <div>
    <child-component :person="{firstName: 'John', lastName: 'Doe'}"></child-component>
  </div>
</template>

Invalid prop: type check failed for prop "data". Expected Array, got Object

引用中的代码显示，问题出现在将对象赋值给期望接收数组的属性上。具体来说，错误信息"Invalid prop: type check failed for prop "data". Expected Array, got Object"表明在props属性中，指定了一个期望接收数组类型的属性"data"，但实际传入的却是一个对象。

解决这个问题的方法是，将对象转换为数组，确保props属性接收到的是一个数组类型的值。在代码中，可以使用Object.values()方法将对象的值转换为数组。

以下是一种解决方法:

data() {
  return {
    cinemaInfo: {},
    halls: [],
    url: ""
  }
},
methods: {
  getCinemaInfo() {
    this.request.get("/cinema").then(res => {
      if (res.code === '200') {
        console.log(res);
        this.cinemaInfo = Object.values(res.data)[0];
        this.halls = Object.values(res.data)[0].hallTypeList.split(',');
        this.url = Object.values(res.data)[0].picture;
        console.log(this.cinemaInfo);
      }
    })
  }
}

这样，通过将res.data的值转换为数组，将其赋给this.cinemaInfo属性，就能解决这个类型不匹配的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue常见错误：Invalid prop: type check failed for prop “data“. Expected Array, got Object](https://blog.csdn.net/qq_41485414/article/details/90263613)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [解决Vue报错解决Invalid prop: type check failed for prop “model“. Expected Object, got Array的问题](https://blog.csdn.net/weixin_51641169/article/details/126289389)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]