How can I load in real time with Vue?

Question

I have a problem.

I want to use spinner when listing data with Vue. But not by giving setTimeout, I want the text loading to appear during the actual loading of the data and unload when the browser completes the loading process.

How can I do that?

// Project List
getAllList: function(){
setTimeout(()=>{
 axios.get('api.php')
 .then(function(response){
            //console.log(response);
            app.listContent = response.data.listPro;

      });
}, 2000)

},

Answer 1

Define a loading progress of data fetching.

• // 0 = not started
• // 1 = loading started
• // 2 = loading completed without problem
• // 3 = there is a problem.

in data define a process prop.

data(){
   return {
      loading: 0
   }
}

then you can use the loading in the method.

getAllList: function(){
 this.loading = 1 
 const self = this
 axios.get('api.php')
 .then(function(response){
    app.listContent = response.data.listPro;
    self.loading = 2
 })
 .catch(err => {
    self.loading = 3
 })

if you don't want to reach data object by using const self then use () =>

 axios.get('api.php')
 .then((response) => {
    this.listContent = response.data.listPro;
    this.loading = 2
 })

if loading == 2 then show the text. if not then handle it differently...