vue防止重复点击提交

这个问题的关键在于 :disable
代码如下：

<template>
  <button @click="submit()" :disabled="isDisable">点击</button>
</template>
 
<script>
  export default {
    name: 'TestButton',
    data: function () {
      return {
        isDisable: false
        //默认isDisable的值为false，按钮可以点击
      }
    },
    methods: {
      submit() {
        this.isDisable = true
        setTimeout(() => {
          this.isDisable = false
        }, 1000)  //设置定时器，1秒后立马将其设置为false，防止重复调用接口
      }
    },
  }
</script>

我们通过设置isDisable来设置disable来控制按钮的点击和不可点击。