处理vue异步请求数据动态从父组件向子组件赋值时，子组件无法获取到值问题

1. 组件执行顺序导致：
父组件：created->子组件:created->子组件：mounted->父组件：mounted
2.问题子组件无法获取到值

//父组件
export default {data(){return{arr:[]}},created(){},methods:{getData(){_getListData({id:xxx}).then(res => {this.arr = res}).catch(err=>{console.log("xxxx")})}}
}
//子组件
export default {props: {formOptions: {type: Array,default: () => {return []}}},data(){return{inFormOptions:[]}},created(){this.inFormOptions = this.inFormOptions}
}

3. 原因：

根据父组件的执行顺序，父组件传递过来的formOptions是初始值，因此赋值失败。

4. 解决方法：

在父组件引用的地方添加v-if进行判断，如异步请求的值为初始值时则不渲染子组件，等到异步获取值完成后，v-if再进行渲染

<z-form v-if="arr.length" :form-options.sync="arr" ref="z-form"></z-form>

处理vue异步请求数据动态从父组件向子组件赋值时，子组件无法获取到值问题相关推荐

vue异步请求数据重新渲染
vue异步请求数据时往往不能及时更新,下面介绍一种方法解决. export default {name: "pic",created() {this.getList();},dat ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
微信小程序 index.js获取app.js异步请求的动态数据
对于 "index.js不能获取app.js异步请求的动态数据" 这个问题,本人也是郁闷了好几分钟. 解决方法是:getApp().wxFunction().then(res =& ...
json请求 post vue_Spring Boot+Vueaxios异步请求数据的12种操作（上篇）
Java大联盟致力于最高效的Java学习关注 Spring Boot + Vue 前后端分离最核心的操作就是通过异步请求完成数据同步,这其中又可以分为很多种不同的情况,比如是 GET 请求还是 ...
Echarts 表格通过ajax异步请求实现动态赋值（分析同比环比的实现）
Echarts 表格通过ajax异步请求实现动态赋值(分析同比环比的实现) 对于ElementUI中使用ECharts在上一篇文章中已经说明具体使用方法一.效果图:(以每一个月的工业产值为例) 我们 ...
javascript --- [代码优化]将复杂的函数分解写异步请求数据的同步写法
说明今天优化项目结构,发现有如下一个函数 const drawMqiPie = async (index) => {// 请求的参数let params = {lineNo: lineNo,d ...
JAVA中.jsp模板文件AJAX异步请求 - 数据渲染问题
JAVA中.jsp模板文件AJAX异步请求 - 数据渲染失败,谁的过失? 后端已经查询出来结果,但是返回的API接口response查看不到对应的信息.(即:后台有,前台没有) 原因分析: 是因为AJ ...
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播的问题. 参考文章: (1)解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播 ...
十一、Vue之请求数据
vue-resource axios fetch-jsonp 一.vue-resource插件请求数据 (一)安装vue-resource插件备注:在安装组件时,一定要加上 --save ,这样该组 ...

处理vue异步请求数据动态从父组件向子组件赋值时，子组件无法获取到值问题

处理vue异步请求数据动态从父组件向子组件赋值时，子组件无法获取到值问题相关推荐

最新文章

热门文章