Javascript 在vuejs项目中单击之间的特定时间内禁用材质设计按钮 问题:

如何设置两次单击之间的超时，以切换按钮中的禁用属性

由于API限制，查询受到限制。因此，为了防止用户坐在那里点击过快而看不到页面刷新，我想在点击之间留出一段时间。我建议的解决方案是在单击按钮后将

disabled

属性传递给按钮，然后在5秒钟内删除该属性，以允许用户再次单击

代码 工作演示

HTML

新配方

JS-Babel 我最初认为，当它被禁用时，应该删除以下类

mdl按钮--accent

。但是在试验代码时，如果您只需传入

disabled

属性，按钮的样式也会改变

---

背景 我已经找到了其他解决方案，但它们都是像jQuery这样的库

这些对我的特定用途不起作用

我还研究了传递禁用属性，但大多数解决方案都是针对reactjs的

---

但不知道如何将这些解决方案转换到我的项目中。

为什么在请求完成后不能使用

setTimeout

函数？类似于@MaxSinev的方法肯定有效。但没有什么是令人耳目一新的，所以我想我发现了另一个问题：/你说“没有什么是令人耳目一新的”是什么意思？如果您还想阻止页面重新加载时的API请求，则当前状态应保存到

localStorage

。我不建议对新项目使用Material Design Lite，因为它处于模式。如果你已经有一个现有的项目，那当然是不同的。

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