什么是Vue.nextTick()
官方文档解释如下:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
什么时候需要用的Vue.nextTick()
你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。
在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。
selectAttrEx(attr, attrGroup) {
var self = this;
attrGroup.list.forEach(function (item) {
if (item.active) {
if(parseInt(item.attr_point)>0)
self.goods_point = self.goods_point - parseInt(item.attr_point);
}
Vue.set(item,'active',false);
});
if(parseInt(attr.attr_point)>0)
self.goods_point = self.goods_point + parseInt(attr.attr_point);
Vue.set(attr,'active',true);
Vue.nextTick(function () {
var attrTxt = '';
var attrid='';
$.each($('.active'), function(index, item){
attrTxt+= (' ' + $(item).text());
attrid+= ($(item).attr('attrid')+'|');
});
$('.id-attr').text('已选择' + attrTxt);
var attrArr=[];
if(attrid!==""){
attrid=attrid.substring(0,attrid.length-1);
console.log(attrid);
attrArr=attrid.split('|');
}
var attrLength=0;
if(self.goods.attr_info.length!=0){
attrLength=self.getJsonLength(self.goods.attr_info);
}
if(attrArr.length<attrLength){
self.goods_stock=self.goods.goods_info.goods_number;
}else{
if(self.attrs.indexOf(attrid)>-1){ //存在
self.goods_stock=self.pro[attrid];
//
}else{
self.goods_stock=0;
}
}
});
},
引用块内容
以上代码:商品属性变化时,随着商品属性变化而变化的商品库存展示。