Vue错误[Vue warn]: Invalid prop: type check failed for prop “data“. Expected Array, got String_invalid prop: type check failed for prop "data". e

Vue-常见错误[Vue warn]: Invalid prop: type check failed for prop “data”. Expected Array, got String

前言:项目中遇见 Invalid prop…Expected XXX, got XXX。像这样的错误一般是同一类型的错误，是数据类型没给对,你给的值和组件需要的数据类型不一致

错误截图

• 以上就是报错信息

错误分析

报错信息的意思是：无效的命名数据:“数据”类型检查失败。期望数组，得到字符串/对象，

• 已经很明白了，这个data传值的时候，组件需要的是一个数组类型，结果咱们给了对象或者字符串,下面是图解
  
  修改之前

<template>
  <div class="app-container">
      <!-- :data绑定data里数据 -->
    <el-table
      v-loading="listLoading"
      :data="learnMentList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
    ...
    
    </el-table>
  <div>
</template>

<script>
import learnMentApi from "@/api/pggw/member/surroundings";
export default {
  data() {
    return {
       //我这里定义的是字符串
      learnMentList: '',
     }
   }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

element ui中配置项中data需要的是array类型

最后修改

<template>
  <div class="app-container">
      <!-- :data绑定data里数据 -->
    <el-table
      v-loading="listLoading"
      :data="learnMentList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
    ...
    
    </el-table>
  <div>
</template>

<script>
import learnMentApi from "@/api/pggw/member/surroundings";
export default {
  data() {
    return {
       //修改成字符串就行
      learnMentList: [],
     }
   }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

控制台信息，可以看见已经没有报错信息

到这结束了~ 感谢三连

更多推荐：wantLG的《普歌-码上鸿鹄团队:前端项目控制台(F12)打印出带样式的文字、图片(像百度一下一样)》

---

• 作者：wantLG
• 本文源自：wantLG的《普歌-码上鸿鹄:Vue错误[Vue warn]: Invalid prop: type check failed for prop “data”. Expected Array, got String 》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。