Solve the problem that the DOM operation on the vue page does not take effect. The dom operation on the vue page takes effect.

Solve the problem that the DOM operation on the vue page does not take effect. The dom operation on the vue page takes effect.

Symptom:

The Element UI is used to render a tree structure. The operation button is displayed when you move the mouse over each node. The effect is as follows:

The error section is as follows:

After adding a node, move it to the vicinity of the new node (in the figure, move it to level 2). The display position of the function button is offset.

Cause search:

After debugging, it is found that after a new node is added, when the DOM operation is executed to obtain the node, the structure is still obtained, and the new node is not obtained.

Cause analysis:

The virtual DOM used by vue makes it impossible to obtain the virtual DOM even though the page has been rendered.

Solution:

Use Vue. nextTick to view official materials:

'The execution of delayed callback after the next DOM update loop is completed 'is not particularly understandable, but we can see that DOM update is a cyclical process, real DOM elements cannot be obtained before the process ends (as to how long the cycle is, it is still under exploration ). The updated DOM can be obtained by placing the DOM operation in nextTick.

Result:

Based on the above principle, the DOM operation function is called in nextTick after data is updated to achieve the desired effect.

The above article solves the problem that the DOM operation on the vue page does not take effect, that is, all the content that I shared with you. I hope to give you a reference and support the help house.