JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <my-button
    v-for="button in buttons"
    ref="mybtns"
    @click="onClick"
  >{{ button }}</my-button>
</div>

JavaScript

const MyButton = {
  template: `
    <button @click="$emit('click', $event)">
      <template v-if="loading">
      	Loading
			</template>
      <template v-else>
        <slot/>
      </template>
    </button>
  `,
  
  data () {
    return {
      loading: false
    }
  }
}

new Vue({
  components: {
    MyButton
  },
  
  data () {
    return {
      buttons: [
        'OK',
        'Cancel',
        'Save'
      ]
    }
  },
  
  methods: {
    onClick () {
      this.$refs.mybtns.forEach(el => el.loading = true)
      
      setTimeout(() => {
      	this.$refs.mybtns.forEach(el => el.loading = false)
      }, 1000)
    }
  }
}).$mount('#app')