How to deal with Vue page DOM operation failure

This time I will bring you the vue pageDOM operationHow to deal with the failure, what are the things to note when dealing with the failure of the DOM operation of the vue page, the following is a practical case, let’s take a look .

Phenomena:

Use Element UI to render a tree structure, and the operation is designed to be displayed when the mouse moves into each node

Button, the effect is as follows:

The following is the error part:

at

New After the node is moved to the vicinity of the new node (in the picture, it is moved to level 2), the display position of the function button is offset

Cause search:

After

debugging it was found that after adding a node, when performing a DOM operation to obtain the node, the previous structure was still obtained. The added node has not been obtained.

Cause analysis:

It is speculated that the virtual DOM used by vue causes the page to be rendered but remains in the Vue instance. In the virtual DOM, it cannot be obtained.

Solution:

Use Vue.nextTick, look at the official materials:

'Execute a delayed callback after the next DOM update cycle ends'. This sentence is not particularly understandable, but it can be seen that DOM update is a cyclic process, and the real DOM cannot be obtained before the end of the process. elements (as to how long this cycle lasts, we are still exploring). By placing the DOM operation in nextTick, you can obtain the updated DOM.

Result:

Based on the above principle, the

function of DOM operation is called in nextTick after updating the data. The desired effect was achieved.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Other related articles on the Chinese website!

Recommended reading:

Analysis of JS method of generating QR code images from links

Vue dynamic creation and deletion of data steps Detailed explanation

The above is the detailed content of How to deal with Vue page DOM operation failure. For more information, please follow other related articles on the PHP Chinese website!