Vue 2 load ajax data before component render

Question

I have a few nested Vue Components and the child loads the data using an AJAX call. Is it possible to have the parent wait to finish mounting until the child has made the ajax call and finished rendering? I have seen some solutions that use async created() or beforeRouteEnter: function (to, from, next) but I cannot seem to get it to work on the Fiddle.

I have a jsfiddle posted here: https://jsfiddle.net/likwidmonster/20potzwc/16/

In the jsfiddle, I have nextTick functions that print to the log when each is loaded. I would like it to have the following output:

grandchild next tick
child next tick
grandchild next tick
child next tick
grandchild next tick
child next tick
parent next tick

@zero298 I am not sure how I would use v-cloak in the scenario. — likwidmonster
– likwidmonster, Commented Jun 20, 2018 at 15:53
Given your setup, the child will have to communicate with the parent when the loading has completed to allow the parent to display. @zero298's suggestion of using v-cloak is to keep the element hidden until you're ready. However, that "readiness" is under your explicit control in this scenario. I do not believe a standard nextTick will work for you here. — Ohgodwhy
– Ohgodwhy, Commented Jun 20, 2018 at 16:30
@Ohgodwhy I am a bit new to Vue JS and am not sure how to communicate to the parent when the child has finished loading and then causing the parent to load. Would I emit from the child to alert the parent it has finished? I don't know how to hold the parent from loading until it receives that message. — likwidmonster
– likwidmonster, Commented Jun 20, 2018 at 16:40

Ohgodwhy · Accepted Answer · 2018-06-20 17:11:58Z

1

You cannot stop the parent from loading so to speak, but you can make it seem like it is by applying v-cloak, v-if, or v-show to the top level HTML element in the template. You can have a property on the parent, such as:

loaded: false

You can then use sync to synchronize this value with the parent and child, by attaching it to the child like this:

<child :loaded.sync="loaded"></child>

Then, within the child, you can use $emit when your Promise resolves:

this.$emit('update:loaded', true)

Which will tell the parent to change loaded from false to true.

Finally, you can make sure the parent isn't rendering until that variable is try by attaching a v-show directive which and passing it the loaded variable:

<div v-show="loaded">

So on initial page load this is false. When the data is finished loading and the child $emit's, then it will be true, and the parent will become visible.

answered Jun 20, 2018 at 17:11

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

likwidmonster Over a year ago

Since the parent has multiple children won't the parent think the all of the children have loaded prematurely since loaded will be set to true after the first child has loaded? I appreciate your help with this!

Ohgodwhy Over a year ago

@likwidmonster That's very true and an oversight on my part - do you happen to use Vuex?

likwidmonster Over a year ago

I am not using Vuex yet.

Ohgodwhy Over a year ago

@likwidmonster Off the top of my head the easiest way I could think of to do this is to register each child in the vuex store on created() and give them a status of false. Then after each ajax request fires, update the store for said child component and set the status to true. Finally, return a getter from the store that loops all of the children and returns true if they're all loaded or false if even one if them isn't. Then in the parent, use a computed property bound to the getter to return that value and use it in the v-show

Collectives™ on Stack Overflow

Vue 2 load ajax data before component render

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related