Home » vue » Vue.js AJAX list rendering check if ready?

Vue.js AJAX list rendering check if ready?

Posted by: admin November 26, 2021 Leave a comment

Questions:

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?

Answers:

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.

###

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