0

I am using vue js 2.5.17 and vue router as front end and laravel as back end. I have a table with over 1000 record so before it shows I want to use a spinner or loader to show the progress. I have managed to use spinner-grow from bootstrap but it keeps showing even when the data is displayed. What I am doing wrong.

In the template I have this:
<div v-show="isloading=true" >
 <div class="spinner-grow" role="status">
 <span class="sr-only">Loading...</span>
 </div>

In data if I have
     isloading:true,

In my method i have

  loadUser(){
          axios.get("api/customer").then((
            {data})=>(
              this.users=data));
              this.isloading=false;
              console.log(this.isloading);
        },
Hotdot Cyber
  • 361
  • 1
  • 5
  • 21

2 Answers2

0

I think you could try something like this

data() {
  return {
    isloading: false, // default value
   };
},

<div v-show="isloading" >
    <div class="spinner-grow" role="status">
    <span class="sr-only">Loading...</span>
</div>

loadUser(){

  this.isloading=true; // make it true to show the loading

  axios.get("api/customer").then((
    {data})=>(this.users=data));
      this.isloading=false; // then hide it here
      console.log(this.isloading);
  },
Tony Tin Nguyen
  • 170
  • 1
  • 7
0

try change this <div v-show="isloading=true" > to this <div v-if="isloading" >

L2_Paver
  • 596
  • 5
  • 11