vue.nextTick() ajax,Vue.nextTick()在ajax请求数据后操作dom,获取高度为0的问题????...

本文讲述了如何在Vue.js中正确利用$nextTick确保DOM更新完毕后再进行高度计算,避免因数据延迟加载导致的布局问题。通过实例演示了在AJAX回调后使用$nextTick获取ul高度的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue中,所有的元素都是js动态生成,哪怕你在body里面写了html标签,那些标签也会被删除重新生成。

然后this.$nextTick是有dom渲染完成触发的,你把this.$nextTick写在mounted函数中,页面一打开,肯定有标签,然后渲染,dom完成了,然后this.$nextTick就触发了,ajax去获取数据,肯定要有一小会时间,比this.$nextTick还要慢很多,所以li没出来,获取ul高度就是0。

this.$nextTick不是说for渲染完数据就触发, 是有标签生成好就触发。

在ajax的成功回调里,即使数据过来了,然后赋值给list,也要在this.$nextTick这个回调函数里面获取ul的高度。

给个例子:

{{v}}

var mx=new Vue({

el:'#box',

data:function(){

return {

list:[]

}

},

mounted:function(){

setTimeout(function(){

this.list=[1,2,3,4,5];

this.$nextTick(function(){

console.log( '2:'+this.$el.offsetHeight );//for渲染完,获取正常

});

console.log('1:'+this.$el.offsetHeight)//先触发,高度0

}.bind(this),1000);//延时1s模拟下ajax

}

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值