Vue.js AJAX list rendering check if ready?

Question

I currently have a component in Vue.js that takes data from an Elasticsearch query and renders a list like so:

<li v-for="country in countries">{{ country.key }}</li>

The problem is that I am not showing people a full list but a read more and only show people about 3 items. To use the read more functionality I first need to wait for the Elasticsearch query to have ran and my list to have fully rendered.

How can I check for when my list is fully rendered? I have read about Vue.nextTick() before, but this does not really suit my case when I read this:

nextTick is intended to be used right after you modified some reactive data.

I also tried it out by simply logging a message inside Vue.nextTick() but it delivers way faster and before my list has even rendered. Tips?

Jeff · Accepted Answer · 2016-06-01 15:10:32Z

1

You need to call nextTick right after you set the countries variable. In your callback from the elastic search query it would look like:

this.countries = response.data;
Vue.nextTick(function(){
    //list is rendered
});

nextTick just makes sure the DOM has already responded to the data that has already been updated.

answered Jun 1, 2016 at 15:10

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

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

2 Comments

Stephan-v Over a year ago

Currently working this out. But let's say I have multiple events that set data and one might be a tiny bit slower than the other. They are all used as filters for a sidebar and right after they are all done I need to perform something. How would I go about doing this? This works for a single instance though.

Stephan-v Over a year ago

Just set it it as method for now and am making a call to the method each time I set a property with an AJAX call. Thanks for helping out!

Yerko Palma · Accepted Answer · 2016-06-01 13:20:39Z

1

Check the Vuejs lyfecycle. You should put your code in the ready() hook, because there you are sure that your component have fully rendered. Now if you are loading data after some event, like mouse click and not in page load, then it should be loaded in the callback of your loading method, then it depends on the library that you are using to load data

answered Jun 1, 2016 at 13:20

Yerko Palma

12.4k5 gold badges37 silver badges59 bronze badges

Collectives™ on Stack Overflow

Vue.js AJAX list rendering check if ready?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related