Async requests inside render functions?

Hello, Vue community :slight_smile:

I was exploring render functions and can’t find a way to render an element after async request.

Here’s the fiddle:

Seems like returning createElement inside then doesn’t do anything. I tried to put it into nextTick as you can see but still no luck. Though I think nextTick it’s not relevant in this case.

Can I somehow make it work? Make async request, get data and render it using render function?

It’s more like a theoretical question, I’m aware how you do it with a regular approach.

No, that’s not possible. render functions have to be synchronous.

You should do the async stuff somewhere else, like in a method, and save the result from the server to the component’s data - that will trigger render which can create the elements based on that data.

1 Like

Thanks Linus, understood.