Stephan-v Stephan-v - 1 year ago 307
Ajax Question

Vue.js AJAX list rendering check if ready?

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

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?

Answer Source

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 =;
    //list is rendered

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