1

In page component I have fetch and I have fetch in my nested components, is there a way to know when all components finished their fetch in order to show loader, for now I'm emit in every component isInitialized and make my page component v-show false until I get all the emits I did

mr_robot
  • 415
  • 1
  • 5
  • 16

1 Answers1

1

Not sure but maybe $fetchState.pending at the top is able to detect that every nested component is done fetching.

https://nuxtjs.org/docs/2.x/components-glossary/pages-fetch/

EDIT on the comments.
this.$children may work fine if you put it on a button @click. Meanwhile, if you plan to use it somewhere else, like in a lifecycle hook it starts to be a bit more tricky.

This is how this works (reference: https://stackoverflow.com/a/44319825/8816585):

  1. Parent's create
  2. Child's create
  3. Child's mounted
  4. Parent's mounted

Using @hook:mounted can also be helpful if you plan to use the mounted() lifecycle.

TL;DR: those kind of things are pretty tricky to handle as you can see.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • but if my nested components in v-else they aren't rendered, so the fetch wont happen until the fetch of the current component happen – mr_robot Jun 20 '21 at 11:41
  • The children need the parent fetch to be done before starting to fetch? – kissu Jun 20 '21 at 11:55
  • Otherwise, you could get the list of children from your parent components and check children's fetch state. – kissu Jun 20 '21 at 11:59
  • Yes the children need the parent fetch to be done, how I check children's fetch state with ref? – mr_robot Jun 20 '21 at 12:10
  • 1
    You can go to your vue devtools, click on a component and then in your console, look for `$vm0.$children`, this will list all of your components. If you select a specific component with something like `$vm0.$children[13].$fetchState.pending`, you'll be able to see if it does have a ended `fetch()` hook or not. So, for your issue, you could list all the children of your parent, see if it does have a `fetch()` hook, if it does, check if it's done. Some recursivity should be able to help too. Alternative solution, would be to have your data fetched globally and track it this way, far easier. – kissu Jun 21 '21 at 08:37
  • Ty sound good solution, and by globally you mean with store? – mr_robot Jun 21 '21 at 10:06
  • 1
    With the store, exactly: having some global state fetched and passed as props to all the children. Not sure if it's the best approach but this works. – kissu Jun 21 '21 at 10:10
  • ty last question how i get $vm0.$children in vue? this.$children isn't the same – mr_robot Jun 21 '21 at 10:15