<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" v-on:click="api">
  ...
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  ...
</div>

I want to show the spinner on the button when I click it.

When the api returns the result, then pop up the modal and hide the spinner at the same time.

It seems relatively easy to implement with jQuery, and as a beginner in vue.js, I was at a loss when writing this code

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" v-on:click="api">
  ...
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  ...
</div>

I want to show the spinner on the button when I click it.

When the api returns the result, then pop up the modal and hide the spinner at the same time.

It seems relatively easy to implement with jQuery, and as a beginner in vue.js, I was at a loss when writing this code

• javascript
• html
• css
• twitter-bootstrap
• vue.js

Share Improve this question Follow asked Apr 11, 2021 at 5:15 neuron42neuron42 4511 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

This is easy with v-show. This allows you to bind to a variable and control if a tag should be visible or not. If the variable is truthy then the element is shown, if it is falsy then the element is hidden. You can learn more about v-show from the docs.

So in your button we need to create a tag to wrap the button text. In this case we will use <span>. Then we will create a spinner with pure bootstrap with:

<div v-show="loading" class="spinner-border spinner-border-sm" role="status">
    <span class="sr-only">Loading...</span>
</div>

Now we create your button

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" v-on:click="API">
      <span v-show="!loading"> Button Text  </span>
      <!-- IF YOU ARE USING VUE BOOTSTRAP USE <b-spinner label="Loading..."></b-spinner> -->
      <div v-show="loading" class="spinner-border spinner-border-sm" role="status">
          <span class="sr-only">Loading...</span>
      </div>
</button>

Next in your code, you need to create a loading variable

data(){
  return{ 
     ...
     loading:false,
     ...
  }
}

Then when you are handling your request you need to control the loading variable.

methods:{
  API(){
    this.loading = true;
    axios.get("/test").then(({res})=>{
        this.loading=false;
    }).catch((error)=>{
        console.log(error);
        this.loading=false;
    });
  }
}

Code SandBox example