undefinedfix
Sign in

Vue this. $nexttick() is executed later, resulting in inaccurate rendering

Muugii0427 edited in Thu, 06 Oct 2022

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

5 Replies
Gravifer
commented on Thu, 06 Oct 2022
this.$refs.multipleTable.toggleAllSelection()
this.$nextTick(()=> {
    this.isChecked = false
})
hllzh
commented on Thu, 06 Oct 2022

Note: this .$ refs . multipleTable . toggleAllSelection () Must be placed in this .$ nextTick () It's not effective until it's executed inside

mrshk
commented on Thu, 06 Oct 2022
    // 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
     }
        
pxlvb
commented on Thu, 06 Oct 2022

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;

fearhack
commented on Thu, 06 Oct 2022
this.$nextTick(()=> {
    this.$refs.multipleTable.toggleAllSelection()
    this.$nextTick(()=> {
        this.isChecked = false
    })
})

Another layer of $nexttick

lock This question has been locked and the reply function has been disabled.