vue implements requesting data first and then rendering dom

This article mainly shares with you an article about requesting data first and then rendering dom in vue. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

I encountered a problem in the project. The following is the code in the vue template:

My previous writing method Yes

The result of this is the following operation of fetching dom. The dom obtained is undefined, that is, it is not fetched.

The reason is that it is not executed in the order of requesting data->rendering dom->getting dom. The actual execution order is to get dom first, and at this time the array option is still empty. The above v- The for loop did not render the dom, so it could not be retrieved at all (I don’t understand why)

Later, I wrote the request data in the created function, and wrote the operation of retrieving the dom in the mounted function. I still execute the operation of fetching DOM first (the order of execution is judged by the order of alert). I am also very desperate.

Finally I found a solution:

I saw someone else's answer: "Use nextTick in the callback of the data request, try it in the callback of nextTick~"

Another person's answer is: "If there is a situation where the dependency on dom must exist, put it in mounted(){this.$nextTick(() => { /* code */ })}" (I have done this before I tried it, it works too well for me, I don’t understand why)

I combined these two methods, in fact, it is mainly the first method, and I found it to be easy to use!

Related recommendations:

vue uses axios cross-domain request data instance detailed explanation

AngularJs watch Method of monitoring input value and requesting data

JavaScript uses JSONP to request cross-domain data examples in detail

The above is the detailed content of vue implements requesting data first and then rendering dom. For more information, please follow other related articles on the PHP Chinese website!