Subscribe on changes!

Suspense regression when toggling an async component in rc.11

avatar
Sep 16th 2020

Version

3.0.0-rc.11

Reproduction link

https://jsfiddle.net/eyq3d0mL/

Steps to reproduce

Consider an async component hello mounted via a Suspense like this:

<Suspense>
  <div>
    <button @click="toggled = !toggled">Toggle {{ toggled }}</button>
    <div v-if="toggled">
      <hello />
    </div>
  </div>
  <template #fallback>Loading...</template>
</Suspense>

What is expected?

In rc.10, when clicking on the toggling button, the loading indicator is displayed, then the async component

What is actually happening?

In rc.11, nothing happens

avatar
Sep 16th 2020

Not really a regression - Suspense usage has been reworked. In short, only suspense root node toggles will trigger pending state now. More details in https://github.com/vuejs/vue-next/pull/2099

avatar
Sep 16th 2020

@yyx990803 Ok thanks, i saw the changes but thought this one would still work.

I still have something weird I think:

<button @click="toggled = !toggled">Toggle {{ toggled }}</button>
<Suspense>
  <div v-if="toggled">
    <hello />
  </div>
  <template #fallback>Loading...</template>
</Suspense>

works, but the loading indicator is not displayed when toggling. Is it expected as well?

See https://jsfiddle.net/7d2zm9xk/