VueJS: Using A Loading Icon When Waiting For Results Of Asynchronous Database Calls

Question

I wonder where and how to setup a loading icon in VueJS, when the data my site depends on, isn't ready.

Do you know how to do this?

Would be nice and helpful.

Check out my answer here ( stackoverflow.com/a/44737095/7814783) . There is even an example fiddle — Vamsi Krishna
– Vamsi Krishna, Commented Jul 6, 2017 at 11:14
you should start with what you tried and how you are currently loading your data. post an example — Frnak
– Frnak, Commented Jul 6, 2017 at 11:48

Jason Hodkinson · Accepted Answer · 2018-10-30 16:37:35Z

4

Considering you are using axios which is currently the most used http client for vue.js you would do something like

data: function() {
  return { results: [], loading: true};
}

And now let's say you load on create

created: function() {
  axios.get('/path/to/my/data/endpoint')
    .then(function(response) {
      this.result = response.data;
      this.loading = false;
    }.bind(this))
    .catch(function() {
      this.loading = false;
    }.bind(this));
}

And in your template you have something like

<img src="/path/to/my/loading/icon" v-if="loading" />

<ul v-else>
  <li v-for="result in results"> ... </li>
</ul>

edited Oct 30, 2018 at 16:37

Jason Hodkinson

941 silver badge12 bronze badges

answered Jul 6, 2017 at 11:57

Frnak

6,8626 gold badges38 silver badges74 bronze badges

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

Collectives™ on Stack Overflow

VueJS: Using A Loading Icon When Waiting For Results Of Asynchronous Database Calls

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related