On gists

Emit, callback in parent

Vue.js

example.vue Raw #

<template>
<ClickWait color="red" @click="doFoo">Darn Button</ClickWait>
 <AnotherClickWait style="background-color:#c0c0c0" @click="doFoo">One More Darn Button</AnotherClickWait>
</template>

import ClickWait from '@/components/ClickWait.vue';
import AnotherClickWait from '@/components/AnotherClickWait.vue';

export default {
  name: "App",
  components: {
    ClickWait, AnotherClickWait
  },
  methods:{
    doFoo(done) {
      setTimeout(() => {
        console.log('im done with whatever biz logic');
        done();
      },3000);
    }
  }
};

bothComponents.vue Raw #

export default {
  data() {
    return {
      loading: false
    }
  },
  methods:{
    clicked() {
      this.loading = true;
      // Kcko - this is the DONE() in parent ...
      this.$emit('click', () => {
        this.loading = false;
      })
    }
  }
};

templates.vue Raw #

<template>
  <v-btn @click="clicked" v-bind="$attrs" :loading="loading">
    <slot></slot>
  </v-btn>
</template>



<template>
  <button @click="clicked" :disabled="loading">
    <slot></slot>
  </button>
</template>