Vuetify 如何避免双击按钮

Question

我有一个 vuetify 按钮，可以将表单数据上传到我们的 api，然后一旦响应返回就会清除数据。但是，我担心用户可以双击该按钮，它会发送数据两次。 vuetify v-btn 中是否有内置方法来禁用双击或三次单击或其他任何操作？或者我是否需要创建一个完全独立的反应模型来在方法完成时禁用按钮？

Answer 1

Vuetify 没有提供内置方法，但将加载状态绑定到 v-btn 的

disabled

属性并不难，该属性根据函数是否正在运行而设置为 false 或 true。

<v-btn :disabled="loading" @click="run"> Button </v-btn>

<script setup>
  import { ref } from 'vue'

  const loading = ref(false)

  async function run() {
    loading.value = true
    // mock API call that takes 3 seconds to complete
    await new Promise(resolve => {
      setTimeout(() => resolve(true), 3000)
    }).finally(() => {
      loading.value = false
    })
  }
</script>

Vuetify Playground 示例