Vue this. $nexttick() is executed later, resulting in inaccurate rendering
problem
this.$nextTick(()=> {
this.$refs.multipleTable.toggleAllSelection()
this.isChecked = false
})Note: this$ refs.multipleTable.toggleAllSelection () must be executed in this. $nexttick() to take effect
As shown above, I want to execute this first$ refs.multipleTable.toggleAllSelection (), again this.isChecked =False, but the test found that this.isChecked =False is always executed before, resulting in incorrect page rendering
Weak chicken solution
this.$nextTick(()=> {
this.$refs.multipleTable.toggleAllSelection()
setTimeout(() => {
this.isChecked = false
}, 100);
})This can solve the problem, but it's not very good
- An attempt was made to encapsulate async awit, but it is invalid as follows:
const nextTickAsync = () => {
return new Promise((resolve, reject) => {
this.$nextTick(() => {
this.$refs.multipleTable.toggleAllSelection();
resolve(true)
})
})
}
const isCheckedAsycn = () => {
return new Promise((resolve, reject) => {
this.$nextTick(() => {
this.isChecked = false
resolve(true)
})
})
}
(async () => {
await nextTickAsync()
await isCheckedAsycn()
})()Ask for a solution?
How to execute this. $nexttick() first this.isChecked = false
this.$refs.multipleTable.toggleAllSelection()
this.$nextTick(()=> {
this.isChecked = false
})
Note: this .$ refs . multipleTable . toggleAllSelection () Must be placed in this .$ nextTick () It's not effective until it's executed inside
// element-ui 表格提供的toggleAllSelection 源码是这样的
// toggleAllSelection内部是异步 且没有返回promise 也就是说不可控
toggleAllSelection() {
this.store.commit('toggleAllSelection');
}
// 这样是不合理的 但确实可行 应该从你的出发点去考虑有没有别的方式解决
async yourMehtod() {
await this.$nextTick()
this.$refs.multipleTable.toggleAllSelection()
// 等待toggleAllSelection触发的dom更新后再次执行
await this.$nextTick()
this.isChecked = false
}
You can try to change your mind. this.$ refs.multipleTable.toggleAllSelection () if the code changes the state.
Try to write a watch and write this in the watch_ isChecked = false;
this.$nextTick(()=> {
this.$refs.multipleTable.toggleAllSelection()
this.$nextTick(()=> {
this.isChecked = false
})
})Another layer of $nexttick