如何避免Vuetify v-btn按钮被重复点击（双击/多击）

Vuetify 的 v-btn 本身没有内置防重复点击机制，需要我们手动通过响应式状态来控制按钮在请求过程中的可用状态，避免重复提交。以下是具体的实现方案：

核心思路 #

通过一个响应式变量标记当前是否处于提交状态，在请求发起时禁用按钮，请求完成（无论成功/失败）后恢复按钮可用状态，同时配合 Vuetify 内置的 loading 状态优化用户体验。

1. 定义响应式状态 #

在组件中添加一个状态变量（比如 isSubmitting），初始值为 false，用来追踪提交状态：

Vue 3（Composition API）

import { ref } from 'vue'

const isSubmitting = ref(false)
const formData = ref({ /* 你的表单数据结构 */ })

Vue 2（Options API）

export default {
  data() {
    return {
      isSubmitting: false,
      formData: { /* 你的表单数据结构 */ }
    }
  }
}

2. 绑定状态到 v-btn #

利用 v-btn 的 loading 属性（自动禁用按钮并显示加载动画），将状态变量绑定上去：

<v-btn 
  @click="handleSubmit" 
  :loading="isSubmitting"
  type="submit"
>
  提交表单
</v-btn>

注：loading 状态会自动让按钮处于禁用状态，无需额外绑定 disabled 属性。如果不需要加载动画，也可以直接绑定 :disabled="isSubmitting"。

3. 在提交方法中控制状态 #

在表单提交的方法里，先标记提交状态为 true，发起 API 请求，请求结束后重置状态并清空表单：

Vue 3

const handleSubmit = async () => {
  isSubmitting.value = true
  try {
    // 调用 API 上传数据
    await yourApiService.submit(formData.value)
    // 清空表单数据
    formData.value = {} // 根据你的表单结构重置
  } catch (error) {
    // 处理提交失败的逻辑，比如提示用户
    console.error('提交失败：', error)
  } finally {
    // 无论成功或失败，都恢复按钮状态
    isSubmitting.value = false
  }
}

Vue 2

methods: {
  async handleSubmit() {
    this.isSubmitting = true
    try {
      await this.$api.submit(this.formData)
      this.formData = {} // 重置表单
    } catch (error) {
      console.error('提交失败：', error)
    } finally {
      this.isSubmitting = false
    }
  }
}

这种方式可以彻底避免用户双击、多击按钮导致的重复提交问题，同时通过加载动画给用户明确的反馈，提升交互体验。

内容的提问来源于stack exchange，提问作者Qiuzman