
Vue错误[Vue warn]: Invalid prop: type check failed for prop “data“. Expected Array, got String
·
文前推荐一下👉前端必备工具推荐网站(图床、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。像这样的错误一般是同一类型的错误,是数据类型没给对,你给的值和组件需要的数据类型不一致
错误截图
- 以上就是报错信息
错误分析
报错信息的意思是:无效的命名数据:“数据”类型检查失败。期望数组,得到字符串/对象,
- 已经很明白了,这个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类型
最后修改
<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)打印出带样式的文字、图片(像百度一下一样)》
- 作者:wantLG
- 本文源自:wantLG的《普歌-码上鸿鹄:Vue错误[Vue warn]: Invalid prop: type check failed for prop “data”. Expected Array, got String 》
- 本文版权归作者和CSDN共有,欢迎转载,且在文章页面明显位置给出原文链接,未经作者同意必须保留此段声明,否则保留追究法律责任的权利。
更多推荐
所有评论(0)