I am trying to use <suspense> multiple times as a fallback while i am refreshing a component's data (using import() on a json file from the async setup()).
As stated by the documentation:
Once in a resolved state, will only revert to a pending state if the root node of the #default slot is replaced.
What's the best way to proc a new pending state of the suspense node from code and call the setup() function again? How am i supposed to replace the root node of the #default slot?
For the moment i force the replacement of the component with a :is statement switching it from a dummy value with a setTimeout delay:
function childComponentHaveToBeRefreshed{
cType.value = markRaw(dummyUI);
//have to set a 1ms timeout there otherwise the replacement seems ignored
setTimeout(()=>{ cType.value = markRaw(realUI); },1);
};
<Suspense>
<component :is="cType"></component>
<template #fallback>
<Loading></Loading>
</template>
</Suspense>
Not the most speedy response, but I still end up here with a Google search.
I do not know if the following solution would work for you, but adding it just in case:
It's explained here (Vue3): https://vuejs.org/guide/built-ins/suspense.html#loading-state
We had an async component which could reload some data through using a watch
on de (reactive) props. This results in just an async request, which is a flow suspense is not intended to be used for like Estus Flask said.
Our final solution is this:
<Suspense timeout="0">
<SomeAsyncComponent :importantProp="item" :key="item.id" />
<template #fallback>
... loading
</template>
</Suspense>
What this does is basicly throw the component away and rendering a new one when the :importantProp
changes due to the usage of :key
.
Suspense shows the previous cached component untill the 'new' component is rendered unless the timeout is exceeded, in which case it falls back to #fallback
.
The timeout="0"
fixes this.
I hope this helps!