vue $nextTick All In One
vue $nextTick All In One
API
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: '未更新'
}
},
methods: {
updateMessage: function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '已更新'
})
}
}
})
methods: {
updateMessage: async function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // => '已更新'
}
}
demo
if (this.isEdit || this.isCopyPush) {
if (val.is_dynamic === 1) {
// setTimeout(() => {
// this.setDynamicAdData();
// }, 1000);
// setTimeout(() => {
// this.setDynamicAdData();
// }, 100);
// setTimeout(() => {
// this.setDynamicAdData();
// }, 0);
this.$nextTick(function () {
// DOM 更新了
this.setDynamicAdData();
});
// this.$nextTick().then(function () {
// // DOM 更新了
// this.setDynamicAdData();
// });
// delay, 防止 DOM 没有渲染
// this.setDynamicAdData();
} else {
this.setAdData();
}
}
refs
https://cn.vuejs.org/v2/guide/reactivity.html?#异步更新队列
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/15318001.html
未经授权禁止转载,违者必究!