vue.js - 使用 v-show 在 vue js 和 bootsrap 中显示微调器

Question

我使用 vue js 2.5.17 和 vue 路由器作为前端，使用 laravel 作为后端。我有一个包含超过 1000 条记录的表，所以在它显示之前我想使用微调器或加载器来显示进度。我已经设法从引导程序中使用 spinner-grow，但即使显示数据，它也会继续显示。我做错了什么。

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,

在我的方法中，我有

  loadUser(){
          axios.get("api/customer").then((
            {data})=>(
              this.users=data));
              this.isloading=false;
              console.log(this.isloading);
        },

Answer 1

试试把这个改成<div v-show="isloading=true" >这个<div v-if="isloading" >

Answer 2

我想你可以试试这样的

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);
  },