文前推荐一下👉前端必备工具推荐网站(图床、API和ChatAI、智能AI简历、AI思维导图神器等实用工具):
站点入口:http://luckycola.com.cn/
图床:https://luckycola.com.cn/public/dist/#/imghub
多种API:https://luckycola.com.cn/public/dist/#/
ChatAI:https://luckycola.com.cn/public/dist/#/chatAi
AI思维导图神器:https://luckycola.com.cn/public/dist/#/aiQStore/aiMindPage

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

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

错误截图

bug报错信息

  • 以上就是报错信息

错误分析

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

  • 已经很明白了,这个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>

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

最后修改

<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>

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

到这结束了~ 感谢三连

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


Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐