Vue 父组件ajax异步更新数据，子组件props获取不到

最新推荐文章于 2023-01-31 10:35:13 发布

前端李小白

最新推荐文章于 2023-01-31 10:35:13 发布

阅读量1.1k

点赞数

分类专栏： vue axios 文章标签： vue axios

本文链接：https://blog.csdn.net/qq_42268364/article/details/100579322

版权

当Vue父组件使用axios异步获取数据时，子组件的props可能在mounted阶段无法获取到数据。为解决此问题，可以在子组件中通过v-if判断props数据的长度，确保数据存在后再进行渲染。如果需要实时更新，记得在数据更新后将props数据重置为空。

摘要由CSDN通过智能技术生成

当父组件 axjos 获取数据，子组件使用 props 接收数据时，执行 mounted 的时候 axjos 还没有返回数据，而且 mounted 只执行一次，这时 props 中接收的数据为空

解决方案：在对应组件中判断数据的长度，用v-if去判断，假设这个days是异步获取的数据。

 <hospitalChart :days.sync='days' :peopleAmount.sync='peopleAmount' v-if="days.length"></hospitalChart

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端李小白

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue里获取不到data_vue中：在子组件的created、mounted中获取不到props中的值data(data为对象或者数据太大时取不到)...

weixin_39638929的博客

12-19

2548

出现这种情况的原因：因为父组件中的要就要传递的props属性是通过发生ajax请求回来的, 请求的这个过程是需要时间的，但是子组件的渲染要快于ajax请求过程，所以此时 created 、mounted这样的只会执行一次的生命周期钩子，已经执行了，但是props还没有流进来(子组件)，所以只能拿到默认值。解决方法：①、watch处理监听 Data 的值，当它由空转变时就会触发，这时候就能取...

vue3 父组件 props 异步传值，子组件接收不到或接收错误

最新发布

weixin_52648900的博客

07-25

1391

vue3 父组件异步 props 传值，子组件处理的具体方法

参与评论您还未登录，请先登录后发表或查看评论

vue sync父组件数据变化，子组件数据确没变化

qq_30908729的博客

12-31

1461

vue使用sync时父组件数据变化，子组件数据确没变化解决方法：那是因为子组件数据只更新一次，之后更改父组件的数据，子组件不再更新，所以我们要在子组件中watch监听父级传递的参数的变化父组件： <inline-editor :value.sync="content" ></inline-editor> 子组件： props: { ...

react 父组件state改变后，通过props传到子组件时props没改变

weixin_44233592的博客

03-17

1326

this.setState({ Tochecked: [...packageIds], ToUnchecked: [], changeIds: [...ids], historyDiagnosis:[...historyDiagnosisChecked] , bizCategoryDiagnosis:[...bizCategoryDiagnosisListChecked] , .

vue父组件数据更新子组件相关内容未改变（watch解决）

liuarmyliu的博客

04-29

5627

vue.js 表格分页ajax 异步加载数据

01-19

分页一般和表格一起用，分页链接作为表格的一部分，将分页链接封装成一个独立的组件，然后作为子组件嵌入到表格组件中，这样比较合理。 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl'...

Javascript vue.js表格分页，ajax异步加载数据

11-27

在成功回调中，更新父组件的数据模型，包括`items`（表格数据）、`perPage`（每页条目数）和`pageAll`（总页数）。总的来说，这个实现方案将分页逻辑与数据加载逻辑分离，通过组件化和事件通信实现了前端和后端的...

解决vue 中 echart 在子组件中只显示一次的问题

10-18

在父组件中，使用Ajax或其他方式获取数据，并将数据通过props传递给子组件。子组件接收这些数据，并根据数据绘制图表。ECharts的初始化需要获取一个DOM元素，然后基于这个元素初始化图表，并提供相应的配置项来设置...

父组件传值到子组件 props 子组件data未变化

u012174809的专栏

01-05

1865

到底是什么问题呢，一句话说不清，见图就明白了。父组件 index.vue <player :play-type.sync="playType"></player> 子组件player.vue props: { playType: { type: String, default: 'video/mp4' } }, data() { return { type: this.playType,

vue组件props对象获取不到

weixin_44143279的博客

11-17

1835

父组件使用props向子组件传对象，控制台打印对象有值，但是打印内部的属性显示未定义。父组件： async getBamboo (date) { this.showNumber = 0; this.showNumber = 1; let parmas = { date: date || '' }; let res = await api.getBambooData(parmas); if (res.data.data)

关于父组件异步更新数据后通知子组件重新渲染

weixin_43883849的博客

01-31

1123

vue 父组件异步获取数据通知子组件

子组件中this.props.data没有根据父组件数据变化而更新

Owen的博客

06-07

434

问题：子组件的数据，来自于父组件；父组件数据改变了，但是this.props.data并没有更新。原因：componentDidMount

父组件传数据给子组件的数据消失了props，重新在子组件中随意修改某项代码，重新让页面渲染后又有数据，此后刷新又消失

laianko的博客

04-16

990

问题代码： ```<template> <div style=" background-color: #f5f7fa;"> <div class="main-body"> <DetailCard :params="params" @datasource="getdata" /> <DetailRate :result="result" /> <DetailOther /> &lt

vue父组件变量变动子组件props接收没有更新/响应

Bryce96的博客

10-17

660

vue父组件变量变动子组件props接收没有更新/响应

vue 父子组件传值,子组件获取不到props值

潇湘子的博客

08-31

9359

问题: 父组件props传值给子组件，子组件在created中获取不到传过来的值关于props传值，这里不赘述直接看官网：https://cn.vuejs.org/v2/guide/components-props.html 分析：因为父组件props传给子组件的值是通过后端接口返回的数据，也就是说是异步返回的数据，那么问题来了，你怎么知道后端什么时候请求完成，然后完成赋值呢？所以导致取值不同步，当然获取不到。解决方案： 1.可以用setTimeout来延时，等异步请求数据完成了，在赋值(不推荐) 写一

vue 父组件ajax异步请求，子组件没有获取到父组件传值的问题

FinelyYang的专栏

01-14

2872

vue 父组件使用ajax异步请求获取数据，由于是异步获取，所以子组件mounted阶段，ajax仍未完成请求，子组件props获取不到数据。解决方法：第一步：子组件中使用watch，监听传参的变化，执行方法逻辑。第二步：子组件created延时执行方法逻辑。第三步：父组件中引用子组件使用v-if做判断，有数据时再加载子组件。第四步：父组件beforeDestroy方...