Bulma loading button test

by jorgeluis

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/buefy.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/buefy.min.css">
<div id="app">
    
  <button
    :class="isLoading? 'is-loading' : ''"
    type="button"
    class="button is-primary"
    @click="makeRequest">native button</button>

  <br><br>

  <b-button
    :loading="isLoading"
    type="is-primary"
    @click="makeRequest">b-button</b-button>

  <br><br>

  <button
    :class="isLoading? 'is-loading' : ''"
    type="button"
    class="button is-primary"
    @click="makeRequest">
    <span>native with span</span>
  </button> 

  
  <footer class="flex-justify-end">
    <button
      :class="{'is-loading':isLoading}"
      :disabled="isDisabled"
      class="button is-primary"
      @click="makeRequest">
      <span>in a flex context</span>
    </button>
  </footer>


</div>

CSS

.button.is-loading span {
  visibility: hidden;
}

.flex-justify-end {
  display: flex;
  justify-content: flex-end;
  margin: 2rem 0;
}

JavaScript

const example = {
	data() {
		return {
			isLoading: false,
      isDisabled: false
		}
	},
	methods: {
		makeRequest () {
    	this.isLoading = true

			setTimeout(_ => {
      	this.isLoading = false
      }, 3000)

		}
  }
}

const app = new Vue(example)
app.$mount('#app')