Disabling a material design button for a specific time between clicks in a vuejs project

Question

Question

How can I set a timeout between clicks which will toggle the disabled attribute in a button?

Due to API restrictions, queries are limited. So to prevent users from just sitting there clicking too fast and not seeing the page refresh, I want to force a time between clicks. The proposed solution that I have is to pass in the disabled attribute to the button after it is clicked, then remove that in 5 seconds to allow the user to click again.

Code

Working demo on CodePen

HTML

<button 
  v-on:click="GetTacos" 
  class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent"
  id="tacoBtn"
>new recipe</button>

JS - Babel

I originally thought that while it is disabled the following class should be removed mdl-button--accent. But when experimenting with the code, if you simply pass in the disabled attribute, the button changes style too.

Background

I have found other solutions but they libraries like jQuery

Those will not work for my specific use

I also looked at passing in disabled attribute but most of those solutions were for reactjs

Dynamic attribute in ReactJS

Not sure how to translate those solutions to my project though.

why you can not use `setTimeout` function after request finished? something like this https://codepen.io/anon/pen/VBarJr — Max Sinev, Jul 16 '18 at 23:34
@MaxSinev that approach definitely works. but nothing is refreshing, so i guess i found another issue :/ — JGallardo, Jul 16 '18 at 23:45
what do you mean when said "nothing is refreshing"? if you want also to prevent API requests on page reload then current state should be saved to `localStorage`. — Max Sinev, Jul 16 '18 at 23:58
I would not recommend using Material Design Lite for a new project, due to it being in [limited support](https://github.com/google/material-design-lite#limited-support) mode. If you already have an existing project, that's different of course. — thirtydot, Jul 17 '18 at 09:15