Subscribe on changes!

Expose internal async component loaded/delayed/error internal refs on component to allow actions to be performed when it's loaded

avatar
Jan 8th 2021

What problem does this feature solve?

When an async component is used as a child (the child component is not under your control) sometimes you need to perform actions from the parent when the component is loaded.

Related to #2671

What does the proposed API look like?

Expose internal async component loaded/delayed/error internal refs on component to allow actions to be performed when it's loaded

avatar
Jan 8th 2021

Can you give us a brief example of a specific use case? that would help understand the challenge better.

avatar
Jan 8th 2021

It looks like emitting events or hooking into the equivalent of @hook:created or similar would also work

avatar
Jan 8th 2021

Yes, the equivalent of hook:created/mounted/... would be nice also, but they would need a payload that specifies which component is processed (the main component or the placeholder/loading or error one)

avatar
Jan 8th 2021

At a framework level (quasar) we can receive custom components to be used for dialogs. The components have an interface that requires them to have a show method, but the component can be sync it async. When the wrapper dialog is mounted it tries to call the show method of the custom component, but it should do so once the component is mounted.

We can safely assume that the component is mounted in a nextTick after being loaded, so any notification of created/loaded or mounted would be good.

avatar
Jul 5th 2022

Cleaning up old issues....

at least the mounted part of the requirement is achievable like this:

<myAsyncComponent @vue:mounted="handler">
avatar
Jul 5th 2022

Isn't it @vnode-mounted / onVnodeMounted? https://github.com/vuejs/core/issues/3178 https://github.com/vuejs/core/issues/4345

The problem is we only have access to the wrapper, which emits mounted, but the async component is not known (loader/component)

avatar
Jul 5th 2022

See Playground

The event is correct as I wrote it, and it's being passed down to the actual component (see the delayed console log)