vue.jsvuetify.jsv-btn

Extending vuetify v-btn component, adding custom click event


I am trying to create component which would extend v-btn in such a way that every time I click a button, it should emit short beep, and disable the button for 5 seconds.

It would be ideal for the button to change color while disabled.

This is a problem, since color is a property, and I can't overwrite it's value...

Also, when I try to invoke super.click(e), I get an error.

You can check example here: https://codesandbox.io/s/elegant-glade-pnhqx


Solution

  • Your Btn component should just "use" v-btn rather than extending it.

    v-bind="$attrs" is to copy any <btn>'s attribute onto <v-btn>. @click event is captured and reemited as-is after doing what needs to be done

    See https://codesandbox.io/s/immutable-paper-w1wck?file=/src/components/Btn.vue:41-56